how can i show and hide div using dropdownlistfor ?

Question

0.00/5 (No votes)

See more:

, +

in my code
in view
@Html.DropDownListFor(model=>model.ddlParentId,Model.ParentValue,">>Select Any Parent<<")
in this dropdownlistfor i have selected the data from database as

public List<SelectListItem> GetStateName()
{
var vStateName = (from tblState in param.DTypes
select new SelectListItem
{

Text =tblState.DataType,
Value = tblState.DataId.ToString()
});

return vStateName.ToList();

}
now what i have to do is
according to the selected value in dropdownlist i have to change the div
how can i do ?
plz suggest me ?

Posted 27-Feb-12 22:18pm

sajan064

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tejas Vaishnav · Answer 1 · 2012-02-27T22:40:00

you can go for it like this...

1) first of all decalre two css calss like this...

CSS

.showDiv
{
   display: block;
}

.hideDiv
{
   display:none;
}

and attache one javascript function with your dropdown that will do your remaining work for show hide div..

the function will look like this...

JavaScript

<script type="text/javascript">
       function showhide(ddl) {
           var div1 = document.getElementById('div1');
           var div2 = document.getElementById('div2');
           if (ddl.value == "DIV1") {
               div1.className = "showDiv";
               div2.className = "hideDiv";
           }
           else{
               div1.className = "hideDiv";
               div2.className = "showDiv";
           }
       }
   </script>

here i have done some demo it will like this.

ASP.NET

<asp:dropdownlist id="ddlTest" runat="server" xmlns:asp="#unknown">
        <asp:listitem value="DIV1">DIV1</asp:listitem>
        <asp:listitem value="DIV2">DIV2</asp:listitem>
    </asp:dropdownlist>

    <div id="div1" style="background:#FF00FF;" class="showDiv">
        <br />
    </div>
    <div id="div2" style="background:#0000FF;" class="hideDiv">
    <br />
    </div>

and attache onchange javascript function like this in page load event

C#

ddlTest.Attributes.Add("onchange", "showhide(this);");

how can i show and hide div using dropdownlistfor ?

1 solution

Solution 1

Add your solution here

Preview 0

how can i show and hide div using dropdownlistfor ?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us