I have this drop down list in a modal
<div class="control-group">
<label class="control-label" for="selectInsert01">Country Name:</label>
<div class="controls">
<select id="selectInsert01" class="input-xlarge with-search" data-bind="foreach: citiesModel.countriesList">
<option data-bind="text: Name, value: CountryID"></option>
</select>
</div>
</div>
Every time I select something and exit the modal and than open it again the selected value in the dropdown list is still selected. How do I reset the values so nothing is selected when I exit the modal
Select remove() Method The remove() method is used to remove an option from a drop-down list. Tip: To add an option to a drop-down list, use the add() method.
val () method in jQuery: This method is used to get the values of form elements or set the value of attribute used for the selected elements. Syntax: $(selector). val ();
To remove the options of an HTML element of select , you can utilize the remove() method: It's important to remove the options backwards; as the remove() method rearranges the options collection. This way, it's guaranteed that the element to be removed still exists!
On modal close
$("#selectInsert01 option:eq(0)").prop("selected", true); //set option of index 0 to selected
This worked for me. Hope it helps.
$("#selectInsert01 option:selected").removeAttr("selected");
If you have used bootstrap class selectpicker in your drop-down list:
$('.selectpicker').selectpicker('val', '-1');
You can also refer this link: http://www.jquerybyexample.net/2012/03/how-to-reset-dropdown-using-jquery.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With