Question

是否可以使用元素的.options属性动态填充带有选项和optgroups的选择框？

简化，这就是我现在正在做的事情（假设循环是动态的，必须通过脚本完成）：

＆＃13;

var demo = document.getElementById("d").children[0];
for (var i = 1; i <= 5; i++)
{
  // this will in this case auto-select and default-select the third option
  demo.options[demo.options.length] = new Option("Value: " + i, i, i == 3, i == 3);
}

＆＃13;

<div id="d">
  <select></select>
</div>

＆＃13;

我想要达到这样的dom结构：

<div id="d">
  <select>
    <optgroup label='Something'>
      <option ...
      <option ...
    </optgroup>
    <optgroup label='Something else'>
      <option ...
      <option ...
      <option ...
    </optgroup>
  </select>
</div>

我完全可以控制选择框中添加了哪些选项和多少选项，我只是为了清晰起见将它们分组在某些标准下（对于这个例子，只是前2和后3，但不一定取决于迭代器）。但是我不能使用任何框架/库，必须是纯粹的javascript。我也知道createElement（）方法，但是我使用了options属性，只是想知道它是否可以使用它。

如果不可能，我想了解动态创建optgroup的其他选择，否则我将完全放弃使用optgroups。

Answer 1

您需要创建optgroup元素，并将您创建的options附加到该元素（然后将optgroup元素附加到select元素。）< / p>

这是一个有效的例子：

var demo = document.getElementById("d").children[0];
var optGroup = document.createElement('optgroup')
optGroup.setAttribute('label', 'some value')
for (var i = 1; i <= 5; i++)
{
  // this will in this case auto-select and default-select the third option
  optGroup.appendChild(new Option("Value: " + i, i, i == 3, i == 3))
}
demo.appendChild(optGroup)

var optGroup = document.createElement('optgroup')
optGroup.setAttribute('label', 'some other value')
for (var i = 6; i <= 10; i++)
{
  // this will in this case auto-select and default-select the third option
  optGroup.appendChild(new Option("Value: " + i, i, i == 3, i == 3))
}
demo.appendChild(optGroup)

<div id="d">
  <select></select>
</div>

Option() constructor是一个非标准构造函数，但几乎每个浏览器都有它。另一方面，<optgroup>元素没有这样的构造函数，因此为了创建它，您必须使用document.createElement。

如何在selectbox

1 个答案: