HTML Select Option : How to Add Another Line of Option

Question

Is it possible to use javascript to modify a select option and add another line of option?

Like this:

<select>
    <option value ="1">1</option>
    <option value ="2">2</option>
    <option value ="3">3</option>
</select>

into this :

<select>
    <option value ="1">1</option>
    <option value ="2">2</option>
    <option value ="3">3</option>
    <option value ="4">4</option>
    <option value ="5">5</option>
</select>

If it is possible to do so, can someone tell me how?

Answer 1

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

Answer 2

In jquery you can do like this...

$('#selectID').append($('<option>', {
    value: 1,
    text: 'New Option' }));

and in javascript you can do like this..

var x = document.getElementById("selectId");
    var option = document.createElement("option");
    option.text = "New Option";
    option.value = "Your Value";
    x.add(option);

Answer 3

1. give the select an ID
2. use JavaScript

One way is like this:

var sel = document.getElementById("mySel");
sel.options[sel.options.length]=new Option(4,4); //adds <option value="4">4</option> to end

Answer 4

You can write something like:

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

Source