Adding Options to Select With JavaScript

Adding options to select with javascript

You could achieve this with a simple for loop:

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

JS Fiddle demo.

JS Perf comparison of both mine and Sime Vidas' answer, run because I thought his looked a little more understandable/intuitive than mine and I wondered how that would translate into implementation. According to Chromium 14/Ubuntu 11.04 mine is somewhat faster, other browsers/platforms are likely to have differing results though.

Edited in response to comment from OP:

[How] do [I] apply this to more than one element?

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

JS Fiddle demo.

And, finally (after quite a delay...), an approach extending the prototype of the HTMLSelectElement in order to chain the populate() function, as a method, to the DOM node:

HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

JS Fiddle demo.

References:

• node.appendChild().
• document.getElementById().
• element.innerHTML.

How to add Drop-Down list (select) programmatically?

This will work (pure JS, appending to a div of id myDiv):

Demo: http://jsfiddle.net/4pwvg/

var myParent = document.body;
//Create array of options to be addedvar array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select listvar selectList = document.createElement("select");selectList.id = "mySelect";myParent.appendChild(selectList);
//Create and append the optionsfor (var i = 0; i < array.length; i++) {    var option = document.createElement("option");    option.value = array[i];    option.text = array[i];    selectList.appendChild(option);}

var newoption = document.createElement("option");
newoption.text = "User1";
selector.add(newoption);

function createOption(option, label) {
      var option = document.createElement("option");
      option.setAttribute("value", option);
      option.innerHTML = label;

      return option;
}

function buildDropDowns(sizes) {    var selections = document.getElementsByClassName('resourceSize');    for(var i=0; i<selections.length; i++) {      //console.log(selection);      for(var j= 0; j<sizes.length; j++) {        selections[i].options.add(createOption(sizes[j], sizes[j]));      }    }}
function createOption(option, label) {  var option = document.createElement("option");  option.setAttribute("value", option);  option.innerHTML = label;    return option;}  var sizes = ["XXL", "XL", "L", "M", "S", "XS"];
buildDropDowns(sizes);

<select id="busMerchPlan" name="busMerchPlan" class="resourceSize"></select><select id="busMerchAlloc" name="busMerchAlloc" class="resourceSize"></select><select id="busMerchBuy" name="busMerchBuy" class="resourceSize"></select><select id="busMerchPDD" name="busMerchPDD" class="resourceSize"></select>

$("#selectList").append(new Option("option text", "value"));

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

function myFunction()
{
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = document.getElementById("text").value;
x.add(option);
}

body, button{
  font-family: consolas, sans-serif;
}
h1,h2,h3{
  border-bottom: 2px solid black;
}

<h1>Add Options!</h1>
<mark>Sorry, but your question was not clear enough and I could not fully understand it. Here is my best shot at answering the question.</mark>

<h2> Result </h2>


<textarea placeholder = "Type here" id = "text"></textarea>
<input type = "submit" onclick = "myFunction()">
<br>

<select id = "mySelect">


</select>

select = document.getElementById('selectElementId');    
var opt = document.createElement('option');
opt.value = 4;
opt.innerHTML = 4;
select.appendChild(opt);

var min = 4,
    max = 5,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

...
$(".statusButton").on('focus', function () {
    var value = "Disable";
    var new_v = "";
    var $statusButton = $(".statusButton");
    if(k == 1){
        if(value == "Disable")
        {
            $statusButton.append("<option value='Disable' >Disable</option>");
        }
        else if(value == "Enable")
       {
           $statusButton.append("<option value='Enable' >Enable</option>")
       }
...