In this article, you will learn how to create a drop-down list (Combo box) dynamically using jQuery. The combo box is something that is created using <select> and <option> tag of HTML. Sometimes we are required to create options that come from somewhere else dynamically (run-time). This article shows you multiple examples to create a dynamic combo box using jQuery.
Table of Contents
Overview
To create a dynamic drop-down combo or drop-down list, let’s assume we have a dynamic JSON array that contains the country list data (code, name) as follows:
[{
"code":"AU",
"name":"Australia"
},{
"code":"FR",
"name":"France"
},{
"code":"IN",
"name":"India"
},{
"code":"JP",
"name":"Japan"
},{
"code":"CH",
"name":"Switzerland"
},{
"code":"GB",
"name":"United Kingdom"
},{
"code":"US",
"name":"United States"
}]
how to create a dynamic select option in jQuery?
Let’s assume we will create a dynamic select option or drop-down list on a button click. Here, we will see multiple examples based on country data formats. For all the examples we will be having the common HTML, only Javascript code will change.
HTML CODE
<button id="btn-generate-combo">Create Dynamic Dropdown List</button>
<br><br>
<!-- container to load dynamic dropdown list -->
<div id="dropdown-container"></div>
Example-1. (Dynamic combo-box using string Array)
Let’s assume we have country data in the form of a string array as follows:
var countries = ["Australia","France","India","Japan","United States"];
Let’s see the jQuery code for this as follows:
<script>
//country data in string array format
var countries = ["Australia","France","India","Japan","United States"];
$(document).ready(function() {
// called on button click
$('#btn-generate-combo').click(function() {
$('#dropdown-container').html(
$(document.createElement('select')).prop({
id: 'country-combo',
name: 'country'
})
)
for (const countryName of countries) {
$('#country-combo').append($(document.createElement('option')).prop({
value: countryName,
text: countryName
}));
}
})
});
</script>
Example-2. (Dynamic combo-box using JSON Array)
Let’s assume we have country data in the form of a JSON array as follows:
var countries = [{
"code":"AU",
"name":"Australia"
},{
"code":"FR",
"name":"France"
},{
"code":"IN",
"name":"India"
},{
"code":"JP",
"name":"Japan"
},{
"code":"CH",
"name":"Switzerland"
},{
"code":"GB",
"name":"United Kingdom"
},{
"code":"US",
"name":"United States"
}];
Now we can write the below jQuery logic according to the above JSON array country data format:
<script>
$(document).ready(function() {
// called on button click
$('#btn-generate-combo').click(function() {
var select = $('<select>')
.prop('id', 'country-combo')
.prop('name', 'country');
$(countries).each(function() {
select.append($("<option>")
.prop('value', this.code)
.text(this.name));
});
$('#dropdown-container').html(select);
})
});
</script>
Example-3. (Alternative)
This example is the alternative to the above example 2.
<script>
$(document).ready(function() {
// called on button click
$('#btn-generate-combo').click(function() {
var select = $('<select id="country-combo" name="country">');
var options ='';
$(countries).each(function() {
var code = this.code;
var name = this.name;
select.append('<option value="'+code+'">'+name+'</option>');
});
$('#dropdown-container').html(select);
})
});
</script>
Conclusion
In this article, you have seen programmatically create a dropdown list using jQuery from the JSON data format. You can learn the same using pure javascript here Create a dynamic SELECT drop-down list (combo-box) in JavaScript.