CODEWITHSUNDEEP
asp.netasp.net-mvcdrop-down-menu
abcd
abcd

Reputation: 109

how to hide a div from a selected value in dropdownlist asp.net mvc

So I have a dropdownlist(below), 

 @Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as
 SelectList, "-- REFERENCE TYPE --")
    @Html.ValidationMessageFor(x => x.reftab)

and I have 2 div which are(below)

    <div class="widgetbox" id="divone">
    Some contents
    </div>

and 

<div class="widgetbox" id="divtwo" style="visibility:hidden">
Some contents
</div>

So what I need to do is, to select a certain value from the dropdown list, and it will hide the first div and show the second div, and when I select another value, vice versa. All codes are in my view file. What change can I make? I hope my explanation is clear. Sorry for bad english. thanks

edit: as shown, divtwo visibility is set hidden. I wanted it to be shown and divone to be hidden when certain value from dropdownlist is selected

Upvotes: 0

Views: 3485

Answers (2)

Dreamweaver
Dreamweaver

Reputation: 1346

@Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as
 SelectList,  ,   new { @onchange="toggleDIvDisplay(this.value)" }

////then add javascript fuction in scripts section 

function toggleDIvDisplay(e)
    {
    if(e == desiredvalue)
    {
    $('#divtwo').show();
    }
    else
    {
    $('#divtwo').hide();
    }
    }

Upvotes: 4

Kaushik Thanki
Kaushik Thanki

Reputation: 3510

Use javascript to do so.

Make one function in javascript that fires Change event and u will get current selected item in this function. Then you can perform your logic there. 

$(function() {
$("#Reference").change(function() {
    alert( $('option:selected', this).text() );
    // Your show hide logic goes here 
});

});

Upvotes: 0

Related Questions