HTML 如何在不使用 <optgroup> 标签的情况下对 select 中的选项进行分组

Question

我有一个包含许多选项的 select 下拉菜单，它们需要分组，因为我给每个 <optgroup> 一个 class 并将它们设置为 display:none ，这样当我 select 另一个 select 下拉列表中的某些内容时，它们就会变得可见。我的问题是我似乎必须使用标签，而我真的不想要标签。我的选项列表会很长，所以在每个选项中插入一个 class 将是一个问题，尤其是当我使用 Jquery 来操作它们时。我怎样才能将它们分组呢？我只是无法在任何地方找到解决方案。

HTML 示例：

<select>
<option>Select something</option>
<optgroup class="default" label="defaultLabelNotwanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</optgroup>
<optgroup class="one" style="display:none" label="firstLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
</optgroup>
<optgroup class="two" style="display:none" label="secondLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option1</option>
    <option>Option6</option>
</optgroup>
<optgroup class="three" style="display:none" label="thirdLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
    <option>Option7</option>
</optgroup>
<optgroup class="four" style="display:none" label="fourthLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
</optgroup>

Answer 1

您只想隐藏标签吗？你试过这个代码了吗？

optgroup {
  visibility: hidden;
}
optgroup option {
  visibility: visible;
}

Answer 2

<select> 中唯一允许的标签是 <option> 和 <optgroup> (https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element)，所以没有，除了使用 optgroup。

你可以做的是将 class 从 optgroup 移动到它的选项，然后将所有选项直接移动到 select 下，最后删除 optgroups。

$(document).ready(function () {
    const select = $('select');
    select.find('option').each(function () {
        select.append($(this).addClass($(this).parent().attr('class')));
    });
    select.find('optgroup').remove();
});

然后您可以隐藏基于 class 的选项：

select.find('.two').hide();

jsfiddle: https://jsfiddle.net/ux2m6bhw/1/

Answer 3

如果您可以控制 select 及其选项的生成方式，那么另一种类似于上一个答案的方法是将所有选项转储到一个 select 中（根本没有组) 如下所示

<select>
    <option class="initialitem">Select something</option>
    <option class="zero">Option1</option>
    <option class="zero">Option2</option>
    <option class="zero">Option3</option>
    <option class="one">i Option1</option>
    <option class="one">i Option2</option>
    <option class="one">i Option3</option>
    <option class="one">i Option4</option>
    <option class="one">i Option5</option>
    <option class="one">i Option6</option>
    <option class="two">ii Option1</option>
    <option class="two">ii Option2</option>
    <option class="two">ii Option3</option>
    <option class="two">ii Option4</option>
    <option class="two">ii Option5</option>
    <option class="two">ii Option1</option>
    <option class="two">ii Option6</option>
    <option class="three">iii Option1</option>
    <option class="three">iii Option2</option>
    <option class="three">iii Option3</option>
    <option class="three">iii Option4</option>
    <option class="three">iii Option5</option>
    <option class="three">iii Option6</option>
    <option class="three">iii Option7</option>
    <option class="four">Option1</option>
    <option class="four">Option2</option>
    <option class="four">Option3</option>
    <option class="four">Option4</option>
    <option class="four">Option5</option>
    <option class="four">Option6</option>
</select>

然后使用 JQuery 您可以使用以下语句隐藏所有选项

$('select').find('option').hide();

然后为了仅显示一组，请执行以下操作

$('select').find('.three').show();
$('select').find('.initialitem').show();

以上仅显示 class 为 three

的选项

HTML 如何在不使用 <optgroup> 标签的情况下对 select 中的选项进行分组

HTML how to group options in a select without using the <optgroup> tag

html

select

label

option