Dynamically DropDownList from JSON Array using jQuery
Today, We want to share with you Dynamically DropDownList from JSON Array using jQuery.In this post we will show you Fill DropDownList from JSON Array using jQuery, hear for Auto-populating Select Boxes using jQuery & AJAX we will give you demo and example for implement.
In this post, we will learn about dynamically populate a select element from json data with jquery with an example.
Fill DropDownList from JSON Array using jQuery
In this post,we will learn about how to Fill DropDownList from JSON Array using jQuery with an example.
Now in this post, I will explain about how to Fill DropDownList from JSON Array using jQuery with appropriate example.
Here,The JSON Array will be read and parsed and then one by one the each JSON object from the JSON Array will be added as Items to the DropDownList jQuery using.
The following HTML Markup consists of an HTML DropDownList and a Button. When the Button is clicked, the JSON Array will be parsed and its items will be used to populate the HTML DropDownList.
[php]
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
function FillDropDownList() {
//Build an array containing Customer records.
var customers = [
{ EmployeeId: 1, EmployeeName: “Jaydeep Gondaliya”, Country: “United States” },
{ EmployeeId: 2, EmployeeName: “Astha Gondaliya”, Country: “Aus” },
{ EmployeeId: 3, EmployeeName: “Vishal Pandya”, Country: “France” },
{ EmployeeId: 4, EmployeeName: “Vijay Bhanderi”, Country: “India” }
];
var ddlCustomers = $(“#ddlCustomers”);
$(customers).each(function () {
var option = $(“”);
//Set Customer EmployeeName in Text part.
option.html(this.EmployeeName);
//Set Customer EmployeeId in Value part.
option.val(this.EmployeeId);
//Add the Option element to DropDownList.
ddlCustomers.append(option);
});
}
[/php]
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Dynamically generate a select list with jQuery, AJAX & PHP.I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
