How to Clear a Drop Down List with jQuery?

To clear a drop-down list with jQuery, we can use the empty or html method.

For instance, if we have the following dropdown and submit button:

<select>
  <option value='0' disabled selected>Select Value</option>
  <option value='1'>Value 1</option>
  <option value='2'>Value 2</option>
</select>

<input type="submit" value="click me" />

Then we can clear the dropdown with we click on the submit button with jQuery by writing:

$('input').on('click', () => {
  $('select').empty();
});

We add a click handler to the input element with on .

Then in the click handler, we call empty on the select dropdown to empty its entries.

We can do the same thing by calling html on the select dropdown with an empty string:

$('input').on('click', () => {
  $('select').html("");
});

The select dropdown will also be emptied once the button is clicked.