Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Resetting All Other DropDownLists When a Selection of a Particular DropDownList Changes

0.00/5 (No votes)
22 Sep 2014 1  
This tip helps you to reset all your DropDownList values to the default one when a DropDownList changes its selection.

Introduction

Sometimes, we may come across a situation where we have few DropDownLists and when we select a value from a particular DropDown, all the other DropDowns should reset to their default value. Here, I have given a solution for that situation.

Using the Code

Let us assume that you have this table structure which includes 3 DropDownLists and a Text Box which displays the selection you made in the DropDownList.

<table>
  <tbody>
     <tr style="width: 100%">
         <th colspan="3">
             This is to reset all other dropdownlist when a dropdowns selection changes
         </th>
     </tr>
     <tr>
         <td>
            <asp:DropDownList ID="DropDownList1" 
            onchange="DisableOtherDropdowns(this)" runat="server">
            </asp:DropDownList>
         </td>
         <td>
             <asp:DropDownList ID="DropDownList2" 
             onchange="DisableOtherDropdowns(this)" runat="server">
             </asp:DropDownList>
         </td>
         <td>
             <asp:DropDownList ID="DropDownList3" 
             onchange="DisableOtherDropdowns(this)" runat="server">
             </asp:DropDownList>
         </td>
     </tr>
     <tr style="width: 100%">
         <td>
             <asp:Label ID="lblSelectedField" 
             runat="server" Text="Selected Text"></asp:Label>
         </td>
         <td>
             <asp:TextBox ID="txtSelectedText" 
             runat="server"></asp:TextBox>
         </td>
    </tr>
  </tbody>
</table>

Now I have created a DataTable with 2 columns and binded that to the DropDownLists.

 DataTable dt = new DataTable();
            dt.Columns.Add("Student Id");
            dt.Columns.Add("Student Name");

            DataRow dr = dt.NewRow();
            dr["Student Id"] = "1";
            dr["Student Name"] = "Mahesh";
            dt.Rows.Add(dr);
//Include as many rows you need and bound it to the DropDown Lists. I have done it for one DropDownList.
// Method is similar to others also.

  DropDownList1.DataSource = dt;
            DropDownList1.DataTextField = "Student Name";
            DropDownList1.DataValueField = "Student Id";
            DropDownList1.DataBind();

Now this is the most important part.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    function DisableOtherDropdowns(obj) {
        var currentDropDownId = obj.id;
        var currentDropDownText = obj.options[obj.selectedIndex].text;
        $('table select').each(function () {
            var dropId = this.id;
            if (dropId != currentDropDownId) {
                this.selectedIndex = 0;
            }
        });
        $('#<%= txtSelectedText.ClientID %>').val(currentDropDownText);
    }
</script>

I have included JQuery CDN. In the script, I'm targeting all DropDowns which are present inside the HTML Table.

When the selection of a DropDownList changes, this script executes. You can see currentDropDownText stores the current selected Value of the DropDown and I'm setting that value to a Text Box simply to see which value is currently selected.

Note

This is really a simple program. There might be other solutions and if you know any, let me know. It is always nice to know more than one approach to solve a problem.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here