我希望这个 javascript 在 id="mainSelect" 的选择中创建从 12 到 100 的选项，因为我不想手动创建所有选项标签。你能给我一些指点吗？谢谢
function selectOptionCreate() {
var age = 88;
line = "";
for (var i = 0; i < 90; i++) {
line += "<option>";
line += age + i;
line += "</option>";
}
return line;
}
您可以通过一个简单的for循环来实现这一点：
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);
}
我和Sime Vidas 的答案的JS Perf比较，运行是因为我认为他的看起来比我的更容易理解/直观，我想知道这将如何转化为实现。根据 Chromium 14/Ubuntu 11.04 我的稍微快一些，但其他浏览器/平台可能会有不同的结果。
针对 OP 的评论进行了编辑：
[如何] [我] 将其应用于多个元素？
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);
并且，最后（后相当的延迟...），延伸的原型的方法HTMLSelectElement，以链的populate()功能，作为一种方法，对DOM节点：
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
});
参考：
干得好：
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/
最简洁直观的方法是：
var selectElement = document.getElementById('ageselect');
for (var age = 12; age <= 100; age++) {
selectElement.add(new Option(age));
}Your age: <select id="ageselect"><option value="">Please select</option></select>您还可以区分名称和值或在列表的开头添加项目，并为使用的函数添加附加参数：
HTMLSelect Element .add (item[, before]);
新选项（文本、值、defaultSelected、selected）；
我不建议在循环内进行 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 结构的一部分，因此对片段所做的更改不会影响文档、不会导致回流，也不会在进行更改时产生任何性能影响。
我要避免的一件事是在循环中执行 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');
编辑：删除了该函数以显示如何将您构建的 html 分配给另一个选择元素 - 从而通过重复函数调用避免不必要的循环。