Why ASP.net dropdown is not 0 by default if jquery is selected

Question

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 with one problem. The problem is that after the function sets the selected index to 0, it shows "Select an option" as index 0 instead of the first default option.

Any idea how to fix this?

Answer 1

I had to remove .val(0) and it worked fine.

 $(ddl1).trigger('chosen:updated'); 

Answer 2

Try something like this:

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

Answer 3

just add data-placeholder="Choose a State" to be like this

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