我想这个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;年龄<= 100岁;年龄+ +){ selectElement。添加新选项(年龄)); ｝ 您的年龄:<select id="ageselect"><option value="">Please select</option></select> .
你也可以区分名称和值，或者在列表开头添加附加参数到使用的函数: HTMLSelect Element。添加(项目之前,[]); new Option(text, value, defaultSelected, selected);
其他回答
我要避免的一件事是在循环中执行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分配给另一个选择元素-从而通过重复函数调用避免不必要的循环。
最简洁直观的方式是:
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
参见:用jQuery从数组中添加选项的最佳方法是什么?
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
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中
