Question

我有一个带许多选项的选择下拉列表，它们需要分组，因为我给每个<optgroup>一个类，并将它们设置为display:none，这样当我选择另一个选择时下拉菜单以使其可见。我的问题是我似乎必须使用标签，但我确实不想要标签。我的选项列表将很长，因此在每个选项中插入一个类将是一个问题，尤其是使用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。

您可以做的是将类从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();

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

Answer 3

如果您可以控制选择及其选项的生成方式，则类似于上一个答案的另一种方法是按照以下说明将所有选项转储为一个选择（完全没有组）

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

以上内容仅显示了three类的选项

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

3 个答案: