可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I want this javascript to create options from 12 to 100 in a select with id=\"mainSelect\", because I do not want to create all of the option tags manually. Can you give me some pointers? Thanks
function selectOptionCreate() {
var age = 88;
line = \"\";
for (var i = 0; i < 90; i++) {
line += \"<option>\";
line += age + i;
line += \"</option>\";
}
return line;
}
回答1:
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
.
回答2:
Here you go:
for ( i = 12; i <= 100; i += 1 ) {
option = document.createElement( \'option\' );
option.value = option.text = i;
select.add( option );
}
Live demo: http://jsfiddle.net/mwPb5/
Update: Since you want to reuse this code, here\'s the function for it:
function initDropdownList( id, min, max ) {
var select, i, option;
select = document.getElementById( id );
for ( i = min; i <= max; i += 1 ) {
option = document.createElement( \'option\' );
option.value = option.text = i;
select.add( option );
}
}
Usage:
initDropdownList( \'mainSelect\', 12, 100 );
Live demo: http://jsfiddle.net/mwPb5/1/
回答3:
I don\'t recommend doing DOM manipulations inside a loop -- that can get expensive in large datasets. Instead, I would do something like this:
var elMainSelect = document.getElementById(\'mainSelect\');
function selectOptionsCreate() {
var frag = document.createDocumentFragment(),
elOption;
for (var i=12; i<101; ++i) {
elOption = frag.appendChild(document.createElement(\'option\'));
elOption.text = i;
}
elMainSelect.appendChild(frag);
}
You can read more about DocumentFragment on MDN, but here\'s the gist of it:
It is used as a light-weight version of Document to store a segment of
a document structure comprised of nodes just like a standard document.
The key difference is that because the document fragment isn\'t part of
the actual DOM\'s structure, changes made to the fragment don\'t affect
the document, cause reflow, or incur any performance impact that can
occur when changes are made.
回答4:
The one thing I\'d avoid is doing DOM operations in a loop to avoid repeated re-renderings of the page.
var firstSelect = document.getElementById(\'first select elements id\'),
secondSelect = document.getElementById(\'second select elements id\'),
optionsHTML = [],
i = 12;
for (; i < 100; i += 1) {
optionsHTML.push(\"<option value=\\\"Age\" + i + \"\\\">Age\" + i + \"</option>\";
}
firstSelect.innerHTML = optionsHTML.join(\'\\n\');
secondSelect.innerHTML = optionsHTML.join(\'\\n\');
Edit: removed the function to show how you can just assign the html you\'ve built up to another select element - thus avoiding the unnecessary looping by repeating the function call.
回答5:
See: What is the best way to add options to a select from an array with jQuery?
$(\'#mySelect\')
.append($(\'<option>\', { value : key })
.text(value));
回答6:
None of the above solutions worked for me. Append method didn\'t give error when i tried but it didn\'t solve my problem. In the end i solved my problem with data property of select2. I used json and got the array and then give it in select2 element initialize. For more detail you can see my answer at below post.
https://stackoverflow.com/a/41297283/4928277
回答7:
Often you have an array of related records, I find it easy and fairly declarative to fill select
this way:
selectEl.innerHTML = array.map(c => \'<option value=\"\'+c.id+\'\">\'+c.name+\'</option>\').join(\'\');
This will replace existing options.
You can use selectEl.insertAdjacentHTML(\'afterbegin\', str);
to add them to the top instead.
And selectEl.insertAdjacentHTML(\'beforeend\', str);
to add them to the bottom of the list.
IE11 compatible syntax:
array.map(function (c) { return \'<option value=\"\'+c.id+\'\">\'+c.name+\'</option>\'; }).join(\'\');
回答8:
When you create a new Option
object, there are two parameters to pass: The first is the text you want to
appear in the list, and the second the value to be assigned to the option.
var myNewOption = new Option(“TheText”,”TheValue”);
You then simply assign this Option
object to an empty array element, for example:
document.theForm.theSelectObject.options[0] = myNewOption;