使用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;
}

见：

---

您可以通过一个简单的for循环来实现这一点：

参考资料：

. . .

---

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

开始：

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

---

现场演示：

以上解决方案都不适合我。Append方法在我尝试时并没有给出错误，但它并没有解决我的问题。最后，我解决了select2的数据属性的问题。我使用json获得数组，然后在select2元素初始化中给出它。关于更多细节，你可以在下面的帖子中看到我的答案

---

我不建议在循环中进行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);
}

您可以在上阅读有关DocumentFragment的更多信息，但这里是其要点：

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

---

通常情况下，您会有一系列相关记录，我发现用这种方式填充select很容易，而且相当具有声明性：

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

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

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

然后，只需将此选项对象指定给空数组元素，例如：

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

---

最简洁直观的方式是：

var-selectElement=document.getElementById'ageselect'；

---

风险值年龄=12；请参阅投票重新打开，因为链接的“duplicate”只有基于jQuery的答案，而这一个需要或至少意味着需要纯JavaScript：mySelect.options[mySelect.options.length]=新选项“Text 1”，“Value1”；如何将其应用于多个元素？如何将其应用于多个元素？我不确定是否遵循-是否要将相同的选项添加到多个选择元素？是，我想使用相同的选项创建框我将其分解成一个函数，您可以在其中调用，只需传入要附加选项的select元素的id。这就是documentFragment的用途。您可以很容易地修改接受的答案，以便在开始时将选项附加到documentFragment，从而防止多次渲染。@杰克：同意，我在后面的编辑中也使用了这种方法，在诱惑的同时扩展主机原型被认为是一个挑战。我认为应该更新它以使用innerText而不是innerHTML来避免跨站点脚本漏洞。你觉得大卫托马斯怎么样？

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 );

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);
}

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');

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

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