我想这个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;
}

当前回答

当您创建一个新的Option对象时,有两个参数要传递:第一个是您想要的文本 出现在列表中,第二个是要分配给该选项的值。

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

然后你只需将这个Option对象赋值给一个空数组元素,例如:

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

其他回答

以上的方法对我来说都没用。附加方法没有给出错误时,我尝试了,但它没有解决我的问题。最后,我用select2的数据属性解决了我的问题。我使用json,得到数组,然后在select2元素初始化中给出它。要了解更多细节,你可以在下面的帖子中看到我的答案。

https://stackoverflow.com/a/41297283/4928277

当您创建一个新的Option对象时,有两个参数要传递:第一个是您想要的文本 出现在列表中,第二个是要分配给该选项的值。

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

然后你只需将这个Option对象赋值给一个空数组元素,例如:

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

我不建议在循环中进行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的结构,对片段所做的更改不会影响 文档,导致回流,或招致任何性能影响 在进行更改时发生。

给你:

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/

参见:用jQuery从数组中添加选项的最佳方法是什么?

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value));