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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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);");