HTML如何在选择中分组选项而不使用标记

我有一个带有许多选项的选择下拉列表，它们需要分组，因为我给每个选项一个类，并将它们设置为显示：无，这样当我在另一个选择下拉列表中选择某个选项时，它们就会变得可见。我的问题是，我似乎必须使用标签，我真的不想要标签。我的选项列表会很长，所以在每个选项中插入一个类将是一个问题，特别是使用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>

---

是否仅隐藏标签？ 你试过这个代码吗

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

---

a中唯一允许的标记是和，因此没有，除了使用optgroup之外，没有其他方法可以对选项进行分组

您可以做的是将类从optgroup移动到其选项，然后将所有选项直接移动到select下，最后删除optgroup

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

然后可以根据类隐藏选项：

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

---

jsFIDLE:

如果您可以控制如何生成select及其选项，那么与前面的答案类似的另一种方法是，只需将所有选项转储到一个select no组中，如下所示

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

然后，要仅显示单个集合，请执行以下操作

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

---

上面只显示了三类选项

eh？发生了什么，你想发生什么，你尝试了什么代码？@thebjorn，我想对我的选项进行分组，而不使用optgroup标记。optgroup标记对选项进行分组，但它们必须有一个标签。因此，我想知道是否有其他方法可以对它们进行分组，因为在使用optgrouptagno时，似乎必须使用label元素，因为它不起作用。还有别的方法可以把他们分组吗？谢谢@Chris。我想知道为什么这被否决了，但我会给它一个答案。这可能有效——除了显示：没有影响它，但我可以找到一个解决办法：

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