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:

<label for="states">States</label>
<select name="states" id="states">
  <option value="Texas">Texas</option>
</select>

<input type="submit" name="sbt_change_single" id="sbt_change_single" value="Change options with Single Option">

<input type="submit" name="sbt_change_array" id="sbt_change_array" value="Change options with Array Options">

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

<script type="text/javascript">

$(document).ready(function(){	

	$('#sbt_change_single').on("click", function(e){

		//Remove all existing options of the dropdown list
		$("#states").empty();			

		//Prepare the new option
		var new_option = $('<option></option>').attr("value", "AL").text("Alabama");

		//Add the new option to the recently cleared select dropdown
		$("#states").append(new_option);

		e.preventDefault();

	});

});

</script>

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

<script type="text/javascript">

$(document).ready(function(){	

	$('#sbt_change_array').on("click", function(e){

		//Remove all existing options of the dropdown list
		$("#states").empty();			

		//Prepare the multiple new options
		var new_states = {"Illinois": "IL",
						  "California": "CA",
						  "New Jersey": "NJ"
						};

		//Add all options to the recently cleared select dropdown
		$.each(new_states, function(key, value) {

		  $("#states").append($("<option></option>").attr("value", value).text(key));

		});	

		e.preventDefault();

	});

});

</script>

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!

*

*