我想这个javascript创建选项从12到100在一个选择id="mainSelect"，因为我不想手动创建所有的选项标签。你能给我一些建议吗?谢谢
function selectOptionCreate() {
var age = 88;
line = "";
for (var i = 0; i < 90; i++) {
line += "<option>";
line += age + i;
line += "</option>";
}
return line;
}
当前回答
我要避免的一件事是在循环中执行DOM操作，以避免重复地重新呈现页面。
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:删除了该函数，以显示如何将已构建的html分配给另一个选择元素-从而通过重复函数调用避免不必要的循环。
其他回答
给你:
for ( i = 12; i <= 100; i += 1 ) {
option = document.createElement( 'option' );
option.value = option.text = i;
select.add( option );
}
现场演示:http://jsfiddle.net/mwPb5/
更新:因为你想重用这段代码，下面是它的函数:
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 );
}
}
用法:
initDropdownList( 'mainSelect', 12, 100 );
现场演示:http://jsfiddle.net/mwPb5/1/
当您创建一个新的Option对象时，有两个参数要传递:第一个是您想要的文本 出现在列表中，第二个是要分配给该选项的值。
var myNewOption = new Option("TheText", "TheValue");
然后你只需将这个Option对象赋值给一个空数组元素，例如:
document.theForm.theSelectObject.options[0] = myNewOption;
For(设I = 12;我< 101;我+ +){ 让HTML = "" HTML += ' <选项值= " ${我}" > ${我}> < /选项 ｀ mainSelect。innerHTML += html ｝ const mainSelect = document.getElementById("mainSelect") 这是一种非常简单易懂的解决问题的方法!希望它能起作用:)
参见:用jQuery从数组中添加选项的最佳方法是什么?
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
我不建议在循环中进行DOM操作——这在大型数据集中成本很高。相反，我会这样做:
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);
}
你可以在MDN上阅读更多关于DocumentFragment的内容，以下是它的要点:
它被用作Document的轻量级版本，用于存储 像标准文档一样由节点组成的文档结构。 关键的区别在于，因为文档片段不是 实际DOM的结构，对片段所做的更改不会影响 文档，导致回流，或招致任何性能影响 在进行更改时发生。
