How to remove all the options of a select box and then add one option and select it using JQuery ?

In this article, we will explore how to dynamically manipulate a select box using jQuery.

We will cover two essential tasks: removing all existing options from the select box and adding a new option, which we'll then select programmatically.

This can be particularly useful when you need to update the options based on user interactions or dynamic data.

Removing All Options from a Select Box #

To start, let's address how to remove all options from a select box. We'll use the empty() method to achieve this in a clean and efficient manner.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<select id="mySelect">
 <option>one</option>
 <option>two</option>
</select>

<script>
  $('#mySelect').empty();
</script>
 

Explanation:

1. We select the element with the ID mySelect.
2. The empty() method clears all child elements (in this case, options) from the select box.

Adding and Selecting a New Option #

Next, we'll add a new option to the select box and select it programmatically. This is done using the append() method for adding an option and the val() method for selecting it.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<select id="mySelect">
  <option>One</option>
  <option>Two</option>
</select>

<script>
  // Remove all options
  $('#mySelect').empty();

  // Add a new option
  $('#mySelect').append('<option value="newOptionValue">New Option</option>');

  // Select the newly added option
  $('#mySelect').val('newOptionValue');
</script>

Explanation of the above example:

1. We first clear all existing options using empty() as shown in the previous example.
2. Then, we add a new option using append(), specifying the value and text for the option.
3. Finally, we select the newly added option by setting its value using val().

Conclusion #

In this article, we've explored how to manipulate a select box using jQuery. We've learned how to remove all options and add a new one, which we can then select programmatically.