How do I clear the dropdownlist values on button click event using jQuery?
You can clear the selected item in the below two different ways. By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.
$('#dropdownid'). empty();
To remove all options from a select list using jQuery, the simplest way is to use the empty() method.
Explanation: If we want to remove all items from dropdown except the first item then we can use $('#ddlItems option:not(:first)'). remove(); Here we have excluded first item from being deleted. If we want to remove all items from dropdown except the last item then we can use $('#ddlItems option:not(:last)').
$('#dropdownid').empty();
That will remove all <option>
elements underneath the dropdown element.
If you want to unselect selected items, go with the code from Russ.
A shorter alternative to the first solution given by Russ Cam would be:
$('#mySelect').val('');
This assumes you want to retain the list, but make it so that no option is selected.
If you wish to select a particular default value, just pass that value instead of an empty string.
$('#mySelect').val('someDefaultValue');
or to do it by the index of the option, you could do:
$('#mySelect option:eq(0)').attr('selected','selected'); // Select first option
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