How to add option to select list in jQuery
JqueryHtml SelectJquery Problem Overview
My select list is called dropListBuilding
. The following code does not seem to work:
for (var i = 0; i < buildings.length; i++) {
var val = buildings[i];
var text = buildings[i];
alert("value of builing at: " + i.toString() + " is: " + val);
$("#dropListBuilding").addOption(val, text, false);
}
This line dies:
$("#dropListBuilding").addOption(val, text, false);
What is the right to add items to the drop down in jQuery? I have tested without that line and the buildings variable does have my data element.
Jquery Solutions
Solution 1 - Jquery
Don't make your code so complicated. It can be done simply as below by using a foreach-like iterator:
$.each(buildings, function (index, value) {
$('#dropListBuilding').append($('<option/>', {
value: value,
text : value
}));
});
Solution 2 - Jquery
$('#dropListBuilding').append('<option>'+val+'</option>');
Solution 3 - Jquery
Doing it this way has always worked for me, I hope this helps.
var ddl = $("#dropListBuilding");
for (k = 0; k < buildings.length; k++)
ddl.append("<option value='" + buildings[k]+ "'>" + buildings[k] + "</option>");
Solution 4 - Jquery
Your code fails because you are executing a method (addOption) on the jQuery object (and this object does not support the method)
You can use the standard Javascript function like this:
$("#dropListBuilding")[0].options.add( new Option("My Text","My Value") )
Solution 5 - Jquery
$.each(data,function(index,itemData){
$('#dropListBuilding').append($("<option></option>")
.attr("value",key)
.text(value));
});
Solution 6 - Jquery
It looks like you want this pluging as it follows your existing code, maybe the plug in js file got left out somewhere.
http://www.texotela.co.uk/code/jquery/select/
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
// use true if you want to select the added options » Run
Solution 7 - Jquery
This is working fine, try out this.
var ob = $("#myListBox");
for (var i = 0; i < buildings.length; i++) {
var val = buildings[i];
var text = buildings[i];
ob.prepend("<option value="+ val +">" + text + "</option>");
}
Solution 8 - Jquery
If you do not want to rely on the 3.5 kB plugin for jQuery or do not want to construct the HTML string while escapping reserved HTML characters, here is a simple way that works:
function addOptionToSelectBox(selectBox, optionId, optionText, selectIt)
{
var option = document.createElement("option");
option.value = optionId;
option.text = optionText;
selectBox.options[selectBox.options.length] = option;
if (selectIt) {
option.selected = true;
}
}
var selectBox = $('#veryImportantSelectBox')[0];
addOptionToSelectBox(selectBox, "ID1", "Option 1", true);
Solution 9 - Jquery
For me this one worked
success: function(data){
alert("SUCCCESS");
$.each(data,function(index,itemData){
console.log(JSON.stringify(itemData));
$("#fromDay").append( new Option(itemData.lookupLabel,itemData.id) )
});
}