Append Option to Select Menu

Adding options to a select using jQuery?

This did NOT work in IE8 (yet did in FF):

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

This DID work:

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);

append option to select menu?

Something like this:

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("id-to-my-select-box");
select.appendChild(option);

What is the best way to add options to a select from a JavaScript object with jQuery?

The same as other answers, in a jQuery fashion:

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

add option to select menu at the beginning of the menu

You are so close! :)

   .prepend( content, [content] )

$('select').prepend('<option value="i-came-first">Hey!</option>');

http://api.jquery.com/prepend/

HTML Select Option : How to Add Another Line of Option

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

You can do it in a loop as well:

http://jsfiddle.net/wdmz3cdv/

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);
}

Append options to drop down box?

I tried to do it on jsfiddle: https://jsfiddle.net/nrx02nwg/

It should be $ instead $j, don't you think?

for(var i=0; i < studValues.length; i++){
    $('#test').append('<option value='+studValues[i].idOne+'>'+studValues[i].idTwo+'</option>');
}

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.

Append the options to select box only once instead of multiple times

Another possibility is to test if the select has already the element.

Add element only if it does not exist in the select:

  $.each(data.menus, function(i, item) {
        if ($('#parent_id option[value="' + data.menus[i].menu_id + '"]').length == 0) {
            $('#parent_id').append($('<option>', {
                value: data.menus[i].menu_id,
                text: data.menus[i].menu_title,
            }));
        }
    });

How do I append text to the end of a select option's text using javascript?

You've done the hard bit - just change the innerText of the element

document.querySelectorAll('.form-dropdown').forEach(function(select) {
  Array.from(select.options).forEach(function(option) {
    if (option.innerText.includes("Banana") || option.innerText.includes("Kiwi")) {
      // the below code is set to disabled to show the two flavours have been targeted
      option.innerText += " (Staff Pick)"
    }
  });
});

<select class="form-dropdown">
  <option disabled="" value="">Choose option</option>
  <option value="0">Apple</option>
  <option value="1">Banana</option>
  <option value="2">Cherry</option>
  <option value="3">Kiwi</option>
  <option value="4">Lemon</option>
</select>

---

Related Topics