我想这个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;
}
当前回答
var selectElement = document.getElementById('ageselect');
for (var age = 12; age <= 100; age++) {
selectElement.add(new Option(age, age));
}
Your age: <select id="ageselect"><option value="">Please select</option></select>
注意，该值作为第二个参数添加到new Option中
其他回答
最简洁直观的方式是:
var selectElement = document.getElementById('ageselect'); For (var age = 12;年龄<= 100岁;年龄+ +){ selectElement。添加新选项(年龄)); ｝ 您的年龄:<select id="ageselect"><option value="">Please select</option></select> .
你也可以区分名称和值，或者在列表开头添加附加参数到使用的函数: HTMLSelect Element。添加(项目之前,[]); new Option(text, value, defaultSelected, selected);
以上的方法对我来说都没用。附加方法没有给出错误时，我尝试了，但它没有解决我的问题。最后，我用select2的数据属性解决了我的问题。我使用json，得到数组，然后在select2元素初始化中给出它。要了解更多细节，你可以在下面的帖子中看到我的答案。
https://stackoverflow.com/a/41297283/4928277
通常你有一个相关记录的数组，我发现用这种方式填充select很简单，而且相当声明性:
selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');
这将取代现有的选项。 你可以使用selectEl。insertAdjacentHTML (afterbegin, str);把它们加到最上面。 和selectEl。insertAdjacentHTML (beforeend, str);将它们添加到列表的底部。
兼容IE11的语法:
array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');
我不建议在循环中进行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的结构，对片段所做的更改不会影响 文档，导致回流，或招致任何性能影响 在进行更改时发生。
给你:
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/
