添加选项以使用javascript进行选择

Question

我希望这个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小提琴演示.

JS Perf比较了我的和Sime Vidas的答案,因为我认为他看起来比我的更容易理解/直观,我想知道这将如何转化为实施.根据Chromium 14/Ubuntu 11.04,我的速度有点快,但其他浏览器/平台可能会有不同的结果.

编辑回应OP的评论:

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

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,以链的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.

Answer 2

干得好:

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/

Answer 3

最简洁直观的方法是：

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）；

Answer 4

我不建议在循环中进行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的更多信息,但这里有它的要点:

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

Answer 5

我要避免的一件事是在循环中执行 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 分配给另一个选择元素 - 从而通过重复函数调用避免不必要的循环。

Answer 6

创建新Option对象时，需要传递两个参数：第一个是要在列表中显示的文本，第二个是要分配给选项的值。

var myNewOption = new Option("TheText", "TheValue");

然后，您只需将此Option对象分配给一个空数组元素，例如：

document.theForm.theSelectObject.options[0] = myNewOption;