Enabling & Disabling Drop Down Lists

Question

I have a web form with two drop down lists.

The 1st drop down list contains 2 values &
the 2nd drop down list contains 3 values.

My objective is, when I select the 1st value of the 1st drop down list, the 2nd dropdownlist should not be visible, but when i select the 2nd value of the 1st dropdownlist, the 2nd dropdownlist should appear.

your title say enabling and disabling but in the body it is of visibility? what do you want to do?? — Amarnath Balasubramanian
– Amarnath Balasubramanian, Commented Jan 25, 2014 at 6:26

mboldt · Accepted Answer · 2014-01-23 08:14:48Z

3

You need to set the AutoPostBack-property of your first drop down list to true and add an OnSelectedIndexChanged-EventHandler

<asp:DropDown id="FirstList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="FirstList_Changed"></asp:DropDown>

In your EventHandler you can check the selected index and act accordingly.

protected void FirstList_Changed(object sender, EventArgs e) {
    if(FirstList.SelectedIndex == 0) {
        SecondList.Visible = false;
    } else {
        SecondList.Visible = true;
    }
}

However you can also do the same thing with JavaScript (see BPX's solution).

answered Jan 23, 2014 at 8:14

mboldt

1,83512 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amarnath Balasubramanian · Accepted Answer · 2014-01-25 06:41:26Z

If you want to enable and disable you can use this Code

 <asp:DropDownList ID="ddl1" runat="server" AppendDataBoundItems="true" AutoPostBack="true" Width="100%">
                    <asp:ListItem Text="" ></asp:ListItem>
                    <asp:ListItem Text="Value 1" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Value 2" Value="2"></asp:ListItem>
                </asp:DropDownList>

You need to set AutoPostBack="true" and in the SelectedIndexChanged write this code

 protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
    {

            try
            {
                if (ddl1.SelectedValue == "1")
            {
                ddl2.Enabled = false;
                //ddl2.Visible = false;
            }
            else
            {
                ddl2.Enabled = true;
                //ddl2.Visible = true;
            }
            }
            catch (Exception ex)
            {
               string b=  ex.Message;
            }

    }

For VISIBLE *enabling/disabling* USE the commented line and comment the other line

Hope this helps

Happy coding

BPX · Accepted Answer · 2014-01-23 08:11:49Z

2

You can do it by using JQuery. A sample code is given below.

$("#DropDownList1").change(function(){
    indx = $("#DropDownList1 option:selected").index();
    if(indx==1)
    {
      $("#DropDownList2").hide();
    }
    else
    {
      $("#DropDownList2").show();
    }
})

Don't forget to add jquery plugin.

answered Jan 23, 2014 at 8:11

BPX

8861 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Enabling & Disabling Drop Down Lists

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related