How to disable dropdownlist element based on user selection in another dropdown in ASP.NET?

Question

I have two dropdowns with multiple items.

If the user selects X, X must be disconnected from the following drop-down list.

If the user selects Y, Y must be disabled from the following drop-down list.

And vice versa.

I tried this, but it does not work:

protected void ddlSearchColumn1_SelectedIndexChanged(object sender, EventArgs e) { var ddl = (DropDownList) sender; string itemSelected = ddl.SelectedValue; ddlSearchColumn2.Items.FindByValue(itemSelected).Enabled = false; } 

Can anybody help me?

Answer 1

You were very close:

markup:

 List 1: <asp:DropDownList ID="ddlSearchColumn1" runat="server" OnSelectedIndexChanged="ddlSearchColumn1_SelectedIndexChanged" AutoPostBack="true" /> List 2: <asp:DropDownList ID="ddlSearchColumn2" runat="server" AutoPostBack="true" /> 

Code for:

 public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) {//JUST PUT SOMETHING IN THE DROPDOWN BOXES var items1 = new List<ListItem>() { new ListItem("Select Option"), new ListItem("Test 1"), new ListItem("Test 2"), new ListItem("Test 3") }; var items2 = new List<ListItem>() { new ListItem("Select Option", ""), new ListItem("DDL 2 Test 1"), new ListItem("DDL 2 Test 2"), new ListItem("DDL 2 Test 3") }; ddlSearchColumn1.DataSource = items1; ddlSearchColumn1.DataBind(); ddlSearchColumn2.DataSource = items2; ddlSearchColumn2.DataBind(); } } protected void ddlSearchColumn1_SelectedIndexChanged(object sender, EventArgs e) { DropDownList list = sender as DropDownList; if (list == null || list.SelectedValue.ToLower() != "test 1") // OR WHATEVER YOUR CRITERIA IS return; ddlSearchColumn2.Items.FindByValue("DDL 2 Test 1").Attributes.Add("Disabled", "Disabled"); } } 

IF you are interested in a client-side solution:

Using jQuery:

 List 1: <asp:DropDownList ID="ddlSearchColumn1" runat="server" /> List 2: <asp:DropDownList ID="ddlSearchColumn2" runat="server" /> <script> jQuery('#<%= ddlSearchColumn1.ClientID %>').change(function () { if (jQuery(this).val() != 'Test 1')//CHANGE YOUR CRITERIA return; jQuery('#<%= ddlSearchColumn2.ClientID %> option[value="DDL 2 Test 1"]').attr('disabled', 'disabled'); }); </script> 

Just using javascript there is no library:

 List 1: <asp:DropDownList ID="ddlSearchColumn1" runat="server" /> List 2: <asp:DropDownList ID="ddlSearchColumn2" runat="server" /> <script> document.getElementById('<%= ddlSearchColumn1.ClientID %>').onchange = function () { var orgDdl = document.getElementById('<%= ddlSearchColumn1.ClientID %>'); var org2ddl = document.getElementById('<%= ddlSearchColumn2.ClientID %>'); if (orgDdl.value != 'Test 1') return; for (var i = 0, ii = org2ddl.options.length; i < ii; i++) { if (org2ddl.options[i].value == "DDL 2 Test 1") { org2ddl.options[i].disabled = "disabled"; break; } } }; </script> 

Answer 2

For some reason this worked for me:

  if (ddlState.SelectedValue == "AK") { MyDdl.Items.FindByValue("1111111").Enabled = false; 

}

Answer 3

 protected void ddlFirst_SelectedIndexChanged(object sender, EventArgs e) { foreach (ListItem item in ddlSecond.Items) { if (item.ToString() == ddlFirst.SelectedValue) { item.Attributes.Add("disabled", "disabled"); } } } protected void ddlSecond_SelectedIndexChanged(object sender, EventArgs e) { foreach (ListItem item in ddlFirst.Items) { if (item.ToString() == ddlSecond.SelectedValue) { item.Attributes.Add("disabled", "disabled"); } } } 

But I still believe that this is the business of the client side.

Answer 4

DropDownList contains a collection of ListItem objects that have the Enabled property that you are trying to set. This property works for ListItems in RadioButtonList or CheckBoxList controls, but NOT DropDownList.

MSDN link: http://msdn.microsoft.com/en-us/library/vstudio/system.web.ui.webcontrols.listitem.enabled(v=vs.100).aspx

"Note: You cannot use this property to disable the ListItem control in DropDownList or the ListBox control."

Edit: the answers above solve your problem as you described, and I learned something new :)

Answer 5

I decided that I would add here.

Two things we forgot to add:

EnableViewState = "True" AutoPostBack = "True"

If you do not add them to the control, the event will not be fired.