How to set ASP.net dropdownlist index to 0 from frontend

Question

I have the following code on an ASP.net page:

<asp:DropDownList ClientIDMode="Static" ID="ddl1" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList> <asp:DropDownList ClientIDMode="Static" ID="ddl2" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList> <asp:DropDownList ClientIDMode="Static" ID="ddl3" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList> <input type="button" id="ClearForm" value="Clear" class="btn1" /> 

JQuery to set the index to 0 for all three drop-down lists:

 $(function () { $("body").on("click", "#ClearForm", function (e) { e.preventDefault(); $("select#ddl1, select#ddl2, select#ddl3").prop('selectedIndex', 0); //does not set the selected index to 0 alert($("select#ddl1").text()); //displays all the options from #ddl1 }); }); 

How do I change so that the dropdownlist index is set to 0.

HTML rendering of the first drop-down list:

 <select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="le"> <option value="Select a State">Select a State</option> <option value="Alabama">AL</option> <option value="Alaska">AK</option> <option value="Arizona">AZ</option> </select> 

I tried the following jQuery and it returns null :

 alert($("select#ddl1").val()); 

Also tried the following and it did not work:

 $('select').each(function () { $(this).find('option:first').prop('selected', 'selected'); }); 

The following JavaScript has been added:

 function setSelectedIndex(dropdownlist, selVal) { var ddl1 = document.getElementById(dropdownlist); alert(ddl1.selectedIndex); if (ddl1.length >= selVal) { //if the selected value is greater then 0, the alert is shown but the value is not set back to 0. ddl1.selectedIndex = selVal; alert("greater or equal"); } else { alert("not greater or equal"); } } 

It looks like if I delete the selected jQuery, it works fine: http://jsfiddle.net/bpbvhsay/

Answer 1

I used Chosen Jquery, due to which the dropdownlist was not updated.

This is HTML:

 <select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="chose-select le"> <option value="Select a State">Select a State</option> <option value="Alabama">AL</option> <option value="Alaska">AK</option> <option value="Arizona">AZ</option> </select> 

JavaScript that sets the selected index to 0:

 function setSelectedIndex(dropdownlist, selVal) { var ddl1 = document.getElementById(dropdownlist); if (selVal < ddl1.selectedIndex) { ddl1.selectedIndex = selVal; $(ddl1).val(0).trigger('chosen:updated'); } } 

This is a trick.

Answer 2

There are many ways to do this, but here is a solution with JavaScript:

 function setSelectedIndex(dropdownlist, selVal) var ddl1 = document.getElementById(dropdownlist); //alert(ddl1.selectedIndex); //displays the proper index... if(ddl1.length >= selVal) { ddl1.selectedIndex = selVal; } } 

Call the above function in accordance with the requirements below:

 setSelectedIndex('<%=ddl1.ClientID %>', 2); 

UPDATE . As you said, you have already installed ClientIDMode , try the following updated function:

 function setSelectedIndex(selVal){ var ddl1 = document.getElementById('ddl1'); if(ddl1.length >= selVal) { ddl1.selectedIndex = selVal; } } 

and name it like:

 setSelectedIndex(0);