Dynamically add numbers to select

Question

I was wondering if there was a way of adding numbers to a select determined by a variable.

For example, newnumber = 3; so then populate the select with 3 (including 0)

<select class="element" id="element" name="element">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Any thoughts?

@KaarelKont-Kontson Nothing substantial, everything I've tried has gone horribly wrong lol — ghghjk, Oct 11 '13 at 14:37
It's possible by using javascript. By using jQuery for example. Did you try using jQuery for this already? — davey, Oct 11 '13 at 14:38
@Sylvain It's generated by another select menu. Simply returns a whole number. — ghghjk, Oct 11 '13 at 14:39
Did you attemt to use google? "jquery append option to select" second result: [Adding options to a select using Jquery/javascript](http://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery-javascript) — Kaarel, Oct 11 '13 at 14:40

score 2 · Answer 1 · answered Oct 11 '13 at 14:44

2

Something like this should work using JQuery:

var selectElement = $('#element');
for (var i = 0; i <= yourVariable; i++) {
    selectElement.append('<option value="' +i +'">' + i + '</option>');
}

answered Oct 11 '13 at 14:44

mayabelle

9,804
9
36
59

score 1 · Answer 2 · answered Oct 11 '13 at 14:44

DEMO

HTML

<select class="add"></select>

JS

function add_options(x){
    var opt;
    for(var i=0;i<=x;i++){
        opt += '<option value="'+i+'">'+i+'</option>'
    }
    return opt;
}

$('select.add').append(add_options(3));

output

<select class="add">undefined
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

score 0 · Answer 3 · answered Oct 11 '13 at 14:47

here you go

<select id='example-select'>
</select>

function populateSelectByNumber(howmany,id) {
  var select = document.getElementById(id);
  for (var i=0;i<howmany;i++) { 
    select.options[select.options.length] = new Option(i, i);
  }
}
populateSelectByNumber(5,'example-select')

score 0 · Answer 4 · answered Oct 11 '13 at 14:49

0

When that newnumber is generated then you can dynamically create your select element.

$("#element").empty();
for(var i = 0; i <= newnumber; i++){
  $("#element").append("<option value='" + i + "'>" + i + "</option>");
}

answered Oct 11 '13 at 14:49

AbhinavRanjan

1,638
17
21

score 0 · Answer 5 · answered Oct 11 '13 at 14:49

The following Linq Query should retrieve the value based on the attribute value...

string input = "<xml string>"
string key = "3";
XElement root = XElement.Parse(input);
var output = (from el in root.Elements("option")
              where (string)el.Attribute("value") == key
              select el).First().Value;

Dynamically add numbers to select

5 Answers5