JavaScript Answers

How to Clear a Drop Down List with jQuery?

Spread the love

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:

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

<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', () => {

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', () => {

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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *