如何在选择框中动态分组选项 [英] how to dynamically group options in selectbox

问题描述

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

Is it possible to dynamically populate a selectbox with options as well as optgroups, using the .options property of the element?

简化，这就是我现在执行操作（假设循环是动态的，必须通过脚本执行）：

Simplified, this is what I'm doing now (imagine the loop is dynamic, have to do by script):

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

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

并且我想实现这样的dom结构：

And I'd like to achieve a dom structure like this:

<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属性，只是想知道它是否可以使用。

I have full control over which and how many options are added to the selectbox, I just like to group them under certain criterias for clarity purposes (for this example just the first 2 and second 3, but not necessarily depending on iterator). But I cannot use any framework/library, it must be pure javascript. Also I'm aware of the createElement() method, however I'm using the options property and was just wondering if it could work with that.

如果不可能，我想知道我必须动态创建optgroup的替代方法，否则我将完全放弃使用optgroup。

If not possible I'd like to know what alternatives I have to dynamically creating optgroups, otherwise I'll just forgo using optgroups altogether.

推荐答案

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

You will need to create the optgroup element and append the options you create to that element (and then append that optgroup element to the select element).

在这里工作示例：

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（）构造函数是非标准的构造函数，但是几乎每个浏览器都具有它。另一方面，< optgroup> 元素没有这样的构造函数，因此要创建它，必须使用 document.createElement 。

The Option() constructor is a non-standard constructor, however almost every browser has it. The <optgroup> element on the other hand doesn't have such constructor, so in order to create it you must use the document.createElement.

这篇关于如何在选择框中动态分组选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！