What is the best method for adding options to a <select> from a JavaScript object using jQuery?
I'm looking for something that I don't need a plugin to do, but I would also be interested in the plugins that are out there.
This is what I did:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
A clean/simple solution:
This is a cleaned up and simplified version of matdumsa's:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().
This question is related to
javascript
jquery
html-select
Most of the other answers use the each function to iterate over the selectValues. This requires that append be called into for each element and a reflow gets triggered when each is added individually.
Updating this answer to a more idiomatic functional method (using modern JS) can be formed to call append only once, with an array of option elements created using map and an Option element constructor.
Using an Option DOM element should reduce function call overhead as the option element doesn't need to be updated after creation and jQuery's parsing logic need not run.
$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
This can be simplified further if you make a factory utility function that will new up an option object:
const newoption = (...args) => new Option(...args)
Then this can be provided directly to map:
$('mySelect').append($.map(selectValues, newoption))
Previous Formulation
Because append also allows passing values as a variable number of arguments, we can precreate the list of option elements map and append them as arguments in a single call by using apply.
$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));
It looks like that in later versions of jQuery, append also accepts an array argument and this can be simplified somewhat:
$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))
If you don't have to support old IE versions, using the Option constructor is clearly the way to go, a readable and efficient solution:
$(new Option('myText', 'val')).appendTo('#mySelect');
It's equivalent in functionality to, but cleaner than:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Using the $.map() function, you can do this in a more elegant way:
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
Yet another way of doing it:
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first, then append that document fragment as an element after...
See John Resig's thoughts on the matter...
Something along the lines of:
var frag = document.createDocumentFragment();
for(item in data.Events)
{
var option = document.createElement("option");
option.setAttribute("value", data.Events[item].Key);
option.innerText = data.Events[item].Value;
frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
The JSON format:
[{
"org_name": "Asset Management"
}, {
"org_name": "Debt Equity Foreign services"
}, {
"org_name": "Credit Services"
}]
And the jQuery code to populate the values to the Dropdown on Ajax success:
success: function(json) {
var options = [];
$('#org_category').html(''); // Set the Dropdown as Blank before new Data
options.push('<option>-- Select Category --</option>');
$.each(JSON.parse(json), function(i, item) {
options.push($('<option/>',
{
value: item.org_name, text: item.org_name
}));
});
$('#org_category').append(options); // Set the Values to Dropdown
}
I have made something like this, loading a dropdown item via Ajax. The response above is also acceptable, but it is always good to have as little DOM modification as as possible for better performance.
So rather than add each item inside a loop it is better to collect items within a loop and append it once it's completed.
$(data).each(function(){
... Collect items
})
Append it,
$('#select_id').append(items);
or even better
$('#select_id').html(items);
In pure JS adding next option to select is easier and more direct
mySelect.innerHTML+= `<option value="${key}">${value}</option>`;
let selectValues = { "1": "test 1", "2": "test 2" };
for(let key in selectValues) {
mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;
}<select id="mySelect">
<option value="0" selected="selected">test 0</option>
</select>Be forwarned... I am using jQuery Mobile 1.0b2 with PhoneGap 1.0.0 on an Android 2.2 (Cyanogen 7.0.1) phone (T-Mobile G2) and could not get the .append() method to work at all. I had to use .html() like follows:
var options;
$.each(data, function(index, object) {
options += '<option value="' + object.id + '">' + object.stop + '</option>';
});
$('#selectMenu').html(options);
Actually, for getting the improved performance, it's better to make option list separately and append to select id.
var options = [];
$.each(selectValues, function(key, value) {
options.push ($('<option>', { value : key })
.text(value));
});
$('#mySelect').append(options);
You can just iterate over your json array with the following code
$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
I found that this is simple and works great.
for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
var output = [];
$.each(selectValues, function(key, value)
{
output.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#mySelect').html(output.join(''));
In this way you "touch the DOM" only one time.
I'm not sure if the latest line can be converted into $('#mySelect').html(output.join('')) because I don't know jQuery internals (maybe it does some parsing in the html() method)
Rather than repeating the same code everywhere, I would suggest it is more desirable to write your own jQuery function like:
jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
Then to add an option just do the following:
$('select').addOption('0', 'None');
The simple way is:
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
If you don't have to support old IE versions, using the Option constructor is clearly the way to go, a readable and efficient solution:
$(new Option('myText', 'val')).appendTo('#mySelect');
It's equivalent in functionality to, but cleaner than:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
I found that this is simple and works great.
for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>append selectbox using jquery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setprice(){
var selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
</script>
</head>
<body onload="setprice();">
<select class="form-control" id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
if (data.length != 0) {
var opts = "";
for (i in data)
opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";
$("#myselect").empty().append(opts);
}
This manipulates the DOM only once after first building a giant string.
There's a sorting problem with this solution in Chrome (jQuery 1.7.1) (Chrome sorts object properties by name/number?) So to keep the order (yes, it's object abusing), I changed this:
optionValues0 = {"4321": "option 1", "1234": "option 2"};
to this
optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};
and then the $.each will look like:
$.each(optionValues0, function(order, object) {
key = object.id;
value = object.value;
$('#mySelect').append($('<option>', { value : key }).text(value));
});
This looks nicer, provides readability, but is slower than other methods.
$.each(selectData, function(i, option)
{
$("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});
If you want speed, the fastest (tested!) way is this, using array, not string concatenation, and using only one append call.
auxArr = [];
$.each(selectData, function(i, option)
{
auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});
$('#selectBox').append(auxArr.join(''));
The JSON format:
[{
"org_name": "Asset Management"
}, {
"org_name": "Debt Equity Foreign services"
}, {
"org_name": "Credit Services"
}]
And the jQuery code to populate the values to the Dropdown on Ajax success:
success: function(json) {
var options = [];
$('#org_category').html(''); // Set the Dropdown as Blank before new Data
options.push('<option>-- Select Category --</option>');
$.each(JSON.parse(json), function(i, item) {
options.push($('<option/>',
{
value: item.org_name, text: item.org_name
}));
});
$('#org_category').append(options); // Set the Values to Dropdown
}
I decided to chime in a bit.
multiple property while adding more options// objects as value/desc_x000D_
let selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2",_x000D_
"3": "test 3",_x000D_
"4": "test Four"_x000D_
};_x000D_
//use div here as using "select" mucks up the original selected value in "mySelect"_x000D_
let opts = $("<div />");_x000D_
let opt = {};_x000D_
$.each(selectValues, function(value, desc) {_x000D_
opts.append($('<option />').prop("value", value).text(desc));_x000D_
});_x000D_
opts.find("option").appendTo('#mySelect');_x000D_
_x000D_
// array of objects called "options" in an object_x000D_
let selectValuesNew = {_x000D_
options: [{_x000D_
value: "1",_x000D_
description: "2test 1"_x000D_
},_x000D_
{_x000D_
value: "2",_x000D_
description: "2test 2",_x000D_
selected: true_x000D_
},_x000D_
{_x000D_
value: "3",_x000D_
description: "2test 3"_x000D_
},_x000D_
{_x000D_
value: "4",_x000D_
description: "2test Four"_x000D_
}_x000D_
]_x000D_
};_x000D_
_x000D_
//use div here as using "select" mucks up the original selected value_x000D_
let opts2 = $("<div />");_x000D_
let opt2 = {}; //only append after adding all options_x000D_
$.map(selectValuesNew.options, function(val, index) {_x000D_
opts2.append($('<option />')_x000D_
.prop("value", val.value)_x000D_
.prop("selected", val.selected)_x000D_
.text(val.description));_x000D_
});_x000D_
opts2.find("option").appendTo('#mySelectNew');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<select id="mySelect">_x000D_
<option value="" selected="selected">empty</option>_x000D_
</select>_x000D_
_x000D_
<select id="mySelectNew" multiple="multiple">_x000D_
<option value="" selected="selected">2empty</option>_x000D_
</select>$.each is slower than a for loop$("#mySelect").append();So the best solution is the following
If JSON data resp is
[
{"id":"0001", "name":"Mr. P"},
{"id":"0003", "name":"Mr. Q"},
{"id":"0054", "name":"Mr. R"},
{"id":"0061", "name":"Mr. S"}
]
use it as
var option = "";
for (i=0; i<resp.length; i++) {
option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
That's what I did with two-dimensional arrays: The first column is item i, add to innerHTML of the <option>. The second column is record_id i, add to the value of the <option>:
PHP
$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
$first_name = $item->first_name;
$last_name = $item->last_name;
$date = $item->date;
$show = $first_name . " " . $last_name . ", " . $date;
$request_id = $request->request_id;
$items_arr[0][$i] = $show;
$items_arr[1][$i] = $request_id;
$i++;
}
echo json_encode($items_arr);
JavaScript/Ajax
function ddl_items() {
if (window.XMLHttpRequest) {
// Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
xmlhttp=new XMLHttpRequest();
}
else{
// Code for Internet Explorer 6 and Internet Explorer 5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var arr = JSON.parse(xmlhttp.responseText);
var lstbx = document.getElementById('my_listbox');
for (var i=0; i<arr.length; i++) {
var option = new Option(arr[0][i], arr[1][i]);
lstbx.options.add(option);
}
}
};
xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
xmlhttp.send();
}
}
If you don't have to support old IE versions, using the Option constructor is clearly the way to go, a readable and efficient solution:
$(new Option('myText', 'val')).appendTo('#mySelect');
It's equivalent in functionality to, but cleaner than:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
I have made something like this, loading a dropdown item via Ajax. The response above is also acceptable, but it is always good to have as little DOM modification as as possible for better performance.
So rather than add each item inside a loop it is better to collect items within a loop and append it once it's completed.
$(data).each(function(){
... Collect items
})
Append it,
$('#select_id').append(items);
or even better
$('#select_id').html(items);
if (data.length != 0) {
var opts = "";
for (i in data)
opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";
$("#myselect").empty().append(opts);
}
This manipulates the DOM only once after first building a giant string.
I combine the two best answers into a great answer.
var outputConcatenation = [];
$.each(selectValues, function(i, item) {
outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});
$("#myselect").html(outputConcatenation.join(''));
Getting the object keys to get the object values. Using map() to add new Options.
const selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2"_x000D_
}_x000D_
const selectTest = document.getElementById('selectTest')_x000D_
Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))<select id="selectTest"></select>A jQuery plugin could be found here: Auto-populating Select Boxes using jQuery & AJAX.
This is slightly faster and cleaner.
var selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2"_x000D_
};_x000D_
var $mySelect = $('#mySelect');_x000D_
//_x000D_
$.each(selectValues, function(key, value) {_x000D_
var $option = $("<option/>", {_x000D_
value: key,_x000D_
text: value_x000D_
});_x000D_
$mySelect.append($option);_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<select id="mySelect"></select>$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key, text: value
}));
});
var output = [];
var length = data.length;
for(var i = 0; i < length; i++)
{
output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
}
$('#choose_schedule').get(0).innerHTML = output.join('');
I've done a few tests and this, I believe, does the job the fastest. :P
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key, text: value
}));
});
I combine the two best answers into a great answer.
var outputConcatenation = [];
$.each(selectValues, function(i, item) {
outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});
$("#myselect").html(outputConcatenation.join(''));
Set your HTML select id into following line below. In here mySelect is used as the id of the select element.
var options = $("#mySelect");
then get the object which is the selectValues in this scenario and sets it to the jquery for each loop. It will use the value and text of the objects accordingly and appends it into the option selections as follows.
$.each(selectValues, function(val, text) {
options.append(
$('<option></option>').val(val).html(text)
);
});
This will display text as the option list when drop down list is selected and once a text is selected value of the selected text will be used.
Eg.
"1": "test 1", "2": "test 2",
Dropdown,
display name: test 1 -> value is 1 display name: test 2 -> value is 2
All of these answers seem unnecessarily complicated. All you need is:
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
That is completely cross browser compatible.
Getting the object keys to get the object values. Using map() to add new Options.
const selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2"_x000D_
}_x000D_
const selectTest = document.getElementById('selectTest')_x000D_
Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))<select id="selectTest"></select>Yet another way of doing it:
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
function populateDropdown(select, data) {
select.html('');
$.each(data, function(id, option) {
select.append($('<option></option>').val(option.value).html(option.name));
});
}
It works well with jQuery 1.4.1.
For complete article for using dynamic lists with ASP.NET MVC & jQuery visit:
If you don't have to support old IE versions, using the Option constructor is clearly the way to go, a readable and efficient solution:
$(new Option('myText', 'val')).appendTo('#mySelect');
It's equivalent in functionality to, but cleaner than:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
A refinement of older @joshperry's answer:
It seems that plain .append also works as expected,
$("#mySelect").append(
$.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);
})
);
or shorter,
$("#mySelect").append(
$.map(selectValues, (v,k) => $("<option>").val(k).text(v))
// $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);
var list = $("#selectList");
$.each(items, function(index, item) {
list.append(new Option(item.text, item.value));
});
var list = document.getElementById("selectList");
for(var i in items) {
list.add(new Option(items[i].text, items[i].value));
}
Most of the other answers use the each function to iterate over the selectValues. This requires that append be called into for each element and a reflow gets triggered when each is added individually.
Updating this answer to a more idiomatic functional method (using modern JS) can be formed to call append only once, with an array of option elements created using map and an Option element constructor.
Using an Option DOM element should reduce function call overhead as the option element doesn't need to be updated after creation and jQuery's parsing logic need not run.
$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
This can be simplified further if you make a factory utility function that will new up an option object:
const newoption = (...args) => new Option(...args)
Then this can be provided directly to map:
$('mySelect').append($.map(selectValues, newoption))
Previous Formulation
Because append also allows passing values as a variable number of arguments, we can precreate the list of option elements map and append them as arguments in a single call by using apply.
$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));
It looks like that in later versions of jQuery, append also accepts an array argument and this can be simplified somewhat:
$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))
Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first, then append that document fragment as an element after...
See John Resig's thoughts on the matter...
Something along the lines of:
var frag = document.createDocumentFragment();
for(item in data.Events)
{
var option = document.createElement("option");
option.setAttribute("value", data.Events[item].Key);
option.innerText = data.Events[item].Value;
frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
There's a sorting problem with this solution in Chrome (jQuery 1.7.1) (Chrome sorts object properties by name/number?) So to keep the order (yes, it's object abusing), I changed this:
optionValues0 = {"4321": "option 1", "1234": "option 2"};
to this
optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};
and then the $.each will look like:
$.each(optionValues0, function(order, object) {
key = object.id;
value = object.value;
$('#mySelect').append($('<option>', { value : key }).text(value));
});
There's an approach using the Microsoft Templating approach that's currently under proposal for inclusion into jQuery core. There's more power in using the templating so for the simplest scenario it may not be the best option. For more details see Scott Gu's post outlining the features.
First include the templating js file, available from github.
<script src="Scripts/jquery.tmpl.js" type="text/javascript" />
Next set-up a template
<script id="templateOptionItem" type="text/html">
<option value=\'{{= Value}}\'>{{= Text}}</option>
</script>
Then with your data call the .render() method
var someData = [
{ Text: "one", Value: "1" },
{ Text: "two", Value: "2" },
{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");
I've blogged this approach in more detail.
The simple way is:
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
All of these answers seem unnecessarily complicated. All you need is:
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
That is completely cross browser compatible.
Be forwarned... I am using jQuery Mobile 1.0b2 with PhoneGap 1.0.0 on an Android 2.2 (Cyanogen 7.0.1) phone (T-Mobile G2) and could not get the .append() method to work at all. I had to use .html() like follows:
var options;
$.each(data, function(index, object) {
options += '<option value="' + object.id + '">' + object.stop + '</option>';
});
$('#selectMenu').html(options);
Using the $.map() function, you can do this in a more elegant way:
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
I have made something like this, loading a dropdown item via Ajax. The response above is also acceptable, but it is always good to have as little DOM modification as as possible for better performance.
So rather than add each item inside a loop it is better to collect items within a loop and append it once it's completed.
$(data).each(function(){
... Collect items
})
Append it,
$('#select_id').append(items);
or even better
$('#select_id').html(items);
Since JQuery's append can take an array as an argument, I'm surprised nobody suggested making this a one-liner with map
$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));
or reduce
['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));
This is slightly faster and cleaner.
var selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2"_x000D_
};_x000D_
var $mySelect = $('#mySelect');_x000D_
//_x000D_
$.each(selectValues, function(key, value) {_x000D_
var $option = $("<option/>", {_x000D_
value: key,_x000D_
text: value_x000D_
});_x000D_
$mySelect.append($option);_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<select id="mySelect"></select>You can just iterate over your json array with the following code
$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
This looks nicer, provides readability, but is slower than other methods.
$.each(selectData, function(i, option)
{
$("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});
If you want speed, the fastest (tested!) way is this, using array, not string concatenation, and using only one append call.
auxArr = [];
$.each(selectData, function(i, option)
{
auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});
$('#selectBox').append(auxArr.join(''));
$.each is slower than a for loop$("#mySelect").append();So the best solution is the following
If JSON data resp is
[
{"id":"0001", "name":"Mr. P"},
{"id":"0003", "name":"Mr. Q"},
{"id":"0054", "name":"Mr. R"},
{"id":"0061", "name":"Mr. S"}
]
use it as
var option = "";
for (i=0; i<resp.length; i++) {
option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
Set your HTML select id into following line below. In here mySelect is used as the id of the select element.
var options = $("#mySelect");
then get the object which is the selectValues in this scenario and sets it to the jquery for each loop. It will use the value and text of the objects accordingly and appends it into the option selections as follows.
$.each(selectValues, function(val, text) {
options.append(
$('<option></option>').val(val).html(text)
);
});
This will display text as the option list when drop down list is selected and once a text is selected value of the selected text will be used.
Eg.
"1": "test 1", "2": "test 2",
Dropdown,
display name: test 1 -> value is 1 display name: test 2 -> value is 2
I have made something like this, loading a dropdown item via Ajax. The response above is also acceptable, but it is always good to have as little DOM modification as as possible for better performance.
So rather than add each item inside a loop it is better to collect items within a loop and append it once it's completed.
$(data).each(function(){
... Collect items
})
Append it,
$('#select_id').append(items);
or even better
$('#select_id').html(items);
var output = [];
$.each(selectValues, function(key, value)
{
output.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#mySelect').html(output.join(''));
In this way you "touch the DOM" only one time.
I'm not sure if the latest line can be converted into $('#mySelect').html(output.join('')) because I don't know jQuery internals (maybe it does some parsing in the html() method)
Since JQuery's append can take an array as an argument, I'm surprised nobody suggested making this a one-liner with map
$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));
or reduce
['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));
function populateDropdown(select, data) {
select.html('');
$.each(data, function(id, option) {
select.append($('<option></option>').val(option.value).html(option.name));
});
}
It works well with jQuery 1.4.1.
For complete article for using dynamic lists with ASP.NET MVC & jQuery visit:
var output = [];
var length = data.length;
for(var i = 0; i < length; i++)
{
output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
}
$('#choose_schedule').get(0).innerHTML = output.join('');
I've done a few tests and this, I believe, does the job the fastest. :P
In pure JS adding next option to select is easier and more direct
mySelect.innerHTML+= `<option value="${key}">${value}</option>`;
let selectValues = { "1": "test 1", "2": "test 2" };
for(let key in selectValues) {
mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;
}<select id="mySelect">
<option value="0" selected="selected">test 0</option>
</select>A refinement of older @joshperry's answer:
It seems that plain .append also works as expected,
$("#mySelect").append(
$.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);
})
);
or shorter,
$("#mySelect").append(
$.map(selectValues, (v,k) => $("<option>").val(k).text(v))
// $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);
Actually, for getting the improved performance, it's better to make option list separately and append to select id.
var options = [];
$.each(selectValues, function(key, value) {
options.push ($('<option>', { value : key })
.text(value));
});
$('#mySelect').append(options);
There's an approach using the Microsoft Templating approach that's currently under proposal for inclusion into jQuery core. There's more power in using the templating so for the simplest scenario it may not be the best option. For more details see Scott Gu's post outlining the features.
First include the templating js file, available from github.
<script src="Scripts/jquery.tmpl.js" type="text/javascript" />
Next set-up a template
<script id="templateOptionItem" type="text/html">
<option value=\'{{= Value}}\'>{{= Text}}</option>
</script>
Then with your data call the .render() method
var someData = [
{ Text: "one", Value: "1" },
{ Text: "two", Value: "2" },
{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");
I've blogged this approach in more detail.
Rather than repeating the same code everywhere, I would suggest it is more desirable to write your own jQuery function like:
jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
Then to add an option just do the following:
$('select').addOption('0', 'None');
var list = $("#selectList");
$.each(items, function(index, item) {
list.append(new Option(item.text, item.value));
});
var list = document.getElementById("selectList");
for(var i in items) {
list.add(new Option(items[i].text, items[i].value));
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>append selectbox using jquery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setprice(){
var selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
</script>
</head>
<body onload="setprice();">
<select class="form-control" id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
I decided to chime in a bit.
multiple property while adding more options// objects as value/desc_x000D_
let selectValues = {_x000D_
"1": "test 1",_x000D_
"2": "test 2",_x000D_
"3": "test 3",_x000D_
"4": "test Four"_x000D_
};_x000D_
//use div here as using "select" mucks up the original selected value in "mySelect"_x000D_
let opts = $("<div />");_x000D_
let opt = {};_x000D_
$.each(selectValues, function(value, desc) {_x000D_
opts.append($('<option />').prop("value", value).text(desc));_x000D_
});_x000D_
opts.find("option").appendTo('#mySelect');_x000D_
_x000D_
// array of objects called "options" in an object_x000D_
let selectValuesNew = {_x000D_
options: [{_x000D_
value: "1",_x000D_
description: "2test 1"_x000D_
},_x000D_
{_x000D_
value: "2",_x000D_
description: "2test 2",_x000D_
selected: true_x000D_
},_x000D_
{_x000D_
value: "3",_x000D_
description: "2test 3"_x000D_
},_x000D_
{_x000D_
value: "4",_x000D_
description: "2test Four"_x000D_
}_x000D_
]_x000D_
};_x000D_
_x000D_
//use div here as using "select" mucks up the original selected value_x000D_
let opts2 = $("<div />");_x000D_
let opt2 = {}; //only append after adding all options_x000D_
$.map(selectValuesNew.options, function(val, index) {_x000D_
opts2.append($('<option />')_x000D_
.prop("value", val.value)_x000D_
.prop("selected", val.selected)_x000D_
.text(val.description));_x000D_
});_x000D_
opts2.find("option").appendTo('#mySelectNew');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<select id="mySelect">_x000D_
<option value="" selected="selected">empty</option>_x000D_
</select>_x000D_
_x000D_
<select id="mySelectNew" multiple="multiple">_x000D_
<option value="" selected="selected">2empty</option>_x000D_
</select>That's what I did with two-dimensional arrays: The first column is item i, add to innerHTML of the <option>. The second column is record_id i, add to the value of the <option>:
PHP
$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
$first_name = $item->first_name;
$last_name = $item->last_name;
$date = $item->date;
$show = $first_name . " " . $last_name . ", " . $date;
$request_id = $request->request_id;
$items_arr[0][$i] = $show;
$items_arr[1][$i] = $request_id;
$i++;
}
echo json_encode($items_arr);
JavaScript/Ajax
function ddl_items() {
if (window.XMLHttpRequest) {
// Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
xmlhttp=new XMLHttpRequest();
}
else{
// Code for Internet Explorer 6 and Internet Explorer 5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var arr = JSON.parse(xmlhttp.responseText);
var lstbx = document.getElementById('my_listbox');
for (var i=0; i<arr.length; i++) {
var option = new Option(arr[0][i], arr[1][i]);
lstbx.options.add(option);
}
}
};
xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
xmlhttp.send();
}
}
A jQuery plugin could be found here: Auto-populating Select Boxes using jQuery & AJAX.
Source: Stackoverflow.com