添加选项以使用JavaScript进行select
我想要这个javascript创build选项从12到100在select与id =“mainSelect”，因为我不想手动创build所有的选项标签。 你能给我一些指点吗？ 谢谢
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); }
JS小提琴演示 。
JS Perf比较了我的和Sime Vidas的答案 ，因为我认为他比我的看起来更容易理解/直观，我想知道这将如何转化为实现。 根据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);
JS小提琴演示 。
最后（经过很HTMLSelectElement …），扩展了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 });
JS小提琴演示 。
参考文献：
-
node.appendChild()。 -
document.getElementById()。 -
element.innerHTML。
干得好：
for ( i = 12; i <= 100; i += 1 ) { option = document.createElement( 'option' ); option.value = option.text = i; select.add( option ); }
现场演示： http : //jsfiddle.net/mwPb5/
更新：因为你想重复使用这个代码，下面是它的function：
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/
我要避免的一件事是在一个循环中执行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');
编辑：删除函数，以显示如何将您已经build立的HTML分配给另一个select元素 – 从而通过重复函数调用避免不必要的循环。
我不build议在一个循环内部进行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结构的一部分，所以对片段所做的更改不会影响文档，引起回stream，或者在进行更改时发生任何性能影响。
请参阅： 使用jQuery将选项添加到数组中的最佳方法是什么？
$('#mySelect') .append($('<option>', { value : key }) .text(value));
上述解决scheme都不适合我。 当我尝试追加方法没有给出错误，但它并没有解决我的问题。 最后，我解决了我的问题与数据属性的select2。 我用json和得到的数组，然后在select2元素初始化。 欲了解更多详情，你可以看到我的答案在下面的职位。
