Create a dropdown combo box dynamically using jQuery

In real-time web applications, sometimes we are required to create a dropdown combo box (select-option-html) dynamically which means the options will be loaded at run time for that dropdown list. This article shows you to create a dropdown combo box dynamically using jQuery, HTML, and JSON. Here we will see multiple examples to dynamically populate select options in jquery.

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 drop-down list on button click in jQuery?

To create a drop-down list dynamically on button click, we will see here multiple examples based on the country data formats. For all the examples we will have the common HTML code only jQuery code will change.

HTML CODE

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
 </head>
 <body>    
    <button id="button1">Create Dynamic Dropdown List</button>	
    <br>
    <br>
    <!-- container to load dynamic dropdown list -->
    <div id="dropdown-container"></div>
</body>

Example-1.

Let’s assume we have a 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() {

	//This method calls on button click
	$("#button1").on("click", function(){

		var select = $("<select>");
		$.each(countries, function(index, country) {
			select.append($("<option>")
			.prop('value', country)
			.text(country));
		});
		
		var label = $("<label>").text("Choose your country:");
		var br = $("<br>");
		
		//Load the dynamically created dropdown in container
		var container=$("#dropdown-container");
		container.append(label).append(br).append(select);
	}); 
});	


</script>

Example-2.

Let’s assume we have a 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"
}];

Then we can write the jquery code for this as follows:

<script>
  //country data in json array format
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"
}];

$(document).ready(function() {

	//This method calls on button click
	$("#button1").on("click", function(){

		var select = $("<select>");
		$.each(countries, function(index, country) {
			select.append($("<option>")
			.prop('value', country.code)
			.text(country.name));
		});
		
		var label = $("<label>").text("Choose your country:");
		var br = $("<br>");
		
		//Load the dynamically created dropdown in container
		var container=$("#dropdown-container");
		container.append(label).append(br).append(select);
	}); 
});	


</script>

Example-3.

In this example, we will take the above JSON array only, but here we will write a different jquery logic to create a dynamic drop-down list.

<script>
//country data in json array format
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"
}];

$(document).ready(function() {

	//This method calls on button click
	$("#button1").on("click", function(){

		var dropdown = '<select>';
		$.each(countries, function(index, country) {
			dropdown+='<option value="'+country.code+'">'+country.name+'</option>';
		});
		dropdown+='</select>';
		
		var label = '<label>Choose your country:</label>';
		var br = '<br>';
		
		//Load the dynamically created dropdown in container
		var container=$("#dropdown-container");
		container.append(label).append(br).append(dropdown);
	}); 
});	


</script>

Conclusion

In this article, you have seen how to create a dropdown list (combo box) dynamically using jquery and JSON.

Share with friends

Leave a Comment

Your email address will not be published. Required fields are marked *