HTML <select>标签中的可选<optgroup>

Question

有没有办法让选项组可选？

<select>
   <optgroup value="0" label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>

Answer 1

我认为你不能,但你可以轻松地用css重现视觉风格,因此只有你选择的选项,所以一切都是可选择的.

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}

<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>

multiple属性允许您选择多行(使用ctrl单击).如果它不是你想要的,你可以删除它.这是为了向您展示一切都变得可选,并且看起来与optiongroup元素相同.

Answer 2

普通的html是不可能的.一些浏览器(mozilla)允许你使用css实现类似的东西,但在撰写本文时,大多数浏览器(webkit,et.al)不支持html选择元素的样式.

但是,有许多javascript库旨在增强html选择小部件并提供缺少的功能,例如您请求的功能.仅举几例:

• 选择二
• 选择
• jQuery UI SelectMenu

Answer 3

有点不同的解决方案..

.optionGroup {
    font-weight: bold;

}

<select>
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1">&nbsp;&nbsp;&nbsp;Child Tag1</option>
    <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option>
</select>

Answer 4

在html标准中支持此功能之前，给出的所有答案都是有问题的，包括：

1. select的子级允许使用类属性，但是在浏览器和浏览器版本之间，样式/样式应用于元素的方式/方式有很大差异。
2. 以＆nbsp;作为前缀 如果选择元素比选择的选项窄，将导致视觉效果不佳，可读文本隐藏在右侧（请参见下面的示例）。
3. 您应用的任何样式都不一定适合浏览器用户习惯的样式。Firefox是粗体和斜体，但不一定是每个浏览器。许多浏览器都会应用包括灰色在内的样式，以帮助表明optgroup无法选择
4. 选择optgroup标签的概念不一定是用户所期望的。

这使我得出结论，解决此问题的最佳方法是对整个站点中的所有选择使用UI-Selectable之类的库（以保持一致性），或者使用optgroup中的第一个选项代表选择所有子项，带有清晰的说明（例如“所有瑞典汽车”）：

<select multiple="multiple">
   <optgroup label="Parent">
      <option value="0" class="optionChild">ALL Children</option>
      <option value="1" class="optionChild">Child Tag 1</option>
      <option value="2" class="optionChild">Child Tag 2</option>
   </optgroup>
</select>

<select multiple="multiple">
   <optgroup label="Parent">
      <option value="0" class="optionChild">ALL Children</option>
      <option value="1" class="optionChild">Child Tag 1</option>
      <option value="2" class="optionChild">Child Tag 2</option>
   </optgroup>
</select>

.my-select {
  width: 60px;
}