添加要使用javascript进行选择的选项

Question

添加要使用javascript进行选择的选项我希望这个javascript在一个带有id=“mainSelect”的SELECT中创建12到100的选项，因为我不想手动创建所有的选项标记。你能给我一些指点吗？谢谢function selectOptionCreate() {   var age = 88;   line = "";   for (var i = 0; i < 90; i++) {     line += "<option>";     line += age + i;     line += "</option>";   }   return line;}

Answer 1

你可以用一个简单的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 Fiddle演示.

JS Perf我的和我的比较Sime Vidas的回答，因为我认为他的看起来比我的更容易理解/直观，我想知道这将如何转化为实现。根据Chromium14/Ubuntu11.04的说法，我的速度有点快，其他浏览器/平台可能会有不同的结果。

---

编辑针对执行部分的评论：

[我]如何将其应用于多个元素？

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 Fiddle演示.

最后(经过很长时间的延迟.)，一种扩展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 Fiddle演示.

参考资料：

• node.appendChild().

• document.getElementById().

• element.innerHTML.

Answer 2

我不建议在循环中执行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，但它的要点是：

它被用作文档的轻量级版本，用于存储由节点组成的文档部分，就像标准文档一样。关键的区别在于，由于文档片段不是实际DOM结构的一部分，因此对该片段所做的更改不会影响文档，不会导致重流，也不会导致更改时可能发生的任何性能影响。