Populate Select Dropdown With Array Values Using jQuery Examples

While working with select dropdown, you may have noticed that it is very easy to work with them, if they are already filled with the option values. But let’s say that now you do not know anything about the values that need to be populated in the select dropdown, rather let’s call it a dynamic array, so do you know how to use jQuery to populate select dropdown with array values? Here are easy examples (with demos) that show you how to do exactly that.

How To use jQurey to Populate Select Dropdown With Array Values

For the sake of the example, let’s assume that we have a select dropdown & we need to populate the States in it as the options. We have the values of these options in an array. Let’s look at couple of examples with few differences to understand the concept better.

Example 1: Populate Select Dropdown With Array Values Without specifying Keys in array

<label for="states">States</label>

<select name="states" id="states">
</select>

<input type="submit" name="sbt_populate_select" id="sbt_populate_select" value="Populate Dropdown" />

<script type="text/javascript">

var states_array = ['Texas', 'Alabama', 'Illinois'];

$('#sbt_populate_select').click(function(e) {

	$.each(states_array, function(val, text) {
		$('#states').append( $('<option></option>').val(val).html(text) )
	}); 

	e.preventDefault();
});

</script>

The above code when executed will give us the following Output:

//	Output
<select name="states" id="states">
	<option value="0">Texas</option>
	<option value="1">Alabama</option>
	<option value="2">Illinois</option>
</select>

From the above output, we can see that the option values start from 0, 1, etc. This happens by default as array count start from 0, by default. In the above example, that will work for us. But what if you want a different value for the options, such as the names of the States themselves. Or maybe you want to modify the keys in a different way & have the customized keys instead? Well, let’s see exactly how to do that in the next example.

Example 2: Populate Select Dropdown With Array Values by specifying the Keys in array

<label for="states_with_keys">States With Keys</label>

<select name="states_with_keys" id="states_with_keys">
</select>

<input type="submit" name="sbt_populate_select_with_keys" id="sbt_populate_select_with_keys" value="Populate Dropdown With Keys & Values" />

<script type="text/javascript">

var states_array_with_keys = {'Texas 1': 'Texas', 'Alabama 2' : 'Alabama', 'Illinois 3' : 'Illinois'};

$('#sbt_populate_select_with_keys').click(function(e) {

	$.each(states_array_with_keys, function(val, text) {
		$('#states_with_keys').append( $('<option></option>').val(val).html(text) )
	}); 

	e.preventDefault();
});

</script>

 The above code when executed, will give us the following Output:

//	Output
<select name="states_with_keys" id="states_with_keys">
	<option value="Texas 1">Texas</option>
	<option value="Alabama 2">Alabama</option>
	<option value="Illinois 3">Illinois</option>
</select>

From the above output, it is clearly evident how easy it could be to specify the keys for an array & have them populate dropdown select options values with the keys & the options text with the values corresponding to those keys.

That’s it!

Do you know of any other ways to use jQuery to Populate Select Dropdown With Array Values? Feel free to suggest by commenting below.