jQuery

jQuery Change Select Options Examples

Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can change or refresh the options of a select list using jQuery.

How To Change Select Options Using jQuery

Let’s assume that we have a select dropdown list that contains the state “Texas” as one of  the values in it. Now we will see different examples that show us how to remove this existing value and add new ones to it.

Here is the common HTML code for all the following examples:

Example 1: Remove existing select dropdown list options and add a single new option to it

In the above example, when the first button is clicked, we can see that the exiting option is removed completely and the new option is added. This method is desirable when you wish to add only one new option. If you want to add multiple options, then take a look at the example below.

Example 2: Remove existing select dropdown list options and add multiple new options to it from an array

In the above example, when the second button is clicked, you can see that all the existing options of the dropdown are removed and new options from the array are added.

Simple, isn’t it?

Do you know of any other ways to change options of a select dropdown list using jQuery? Feel free to suggest by commenting below.

Share your thoughts, comment below now!

*

*