StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could achieve this with a simple <code>for</code> loop:</p> <pre><code>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); } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/NX3ac/" rel="noreferrer">JS Fiddle demo</a>.</p> <p><a href="http://jsperf.com/" rel="noreferrer">JS Perf</a> comparison of both mine and <a href="http://jsperf.com/comparison-of-loops" rel="noreferrer">Sime Vidas' answer</a>, 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.</p> <hr /> <p><strong>Edited</strong> in response to comment from OP:</p> <blockquote> <p>[How] do [I] apply this to more than one element?</p> </blockquote> <pre><code>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); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/NX3ac/1/" rel="noreferrer">JS Fiddle demo</a>.</p> <p>And, finally (after quite a delay...), an approach extending the prototype of the <code>HTMLSelectElement</code> in order to chain the <code>populate()</code> function, as a method, to the DOM node:</p> <pre><code>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 }); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/NX3ac/148/" rel="noreferrer">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li><a href="https://developer.mozilla.org/en/DOM/node.appendChild" rel="noreferrer"><code>node.appendChild()</code></a>.</li> <li><a href="https://developer.mozilla.org/en/DOM/document.getElementById" rel="noreferrer"><code>document.getElementById()</code></a>.</li> <li><a href="https://developer.mozilla.org/en/DOM/element.innerHTML" rel="noreferrer"><code>element.innerHTML</code></a>.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload