HTML <select> 标记中的可选 <optgroup>答案

【问题标题】：Selectable <optgroup> in HTML <select> tagHTML <select> 标记中的可选 <optgroup>
【发布时间】：2012-03-27 15:06:18
【问题描述】：

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

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

【问题讨论】：

标签： html html-select optgroup

【解决方案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 元素相同。

【讨论】：

抱歉忘记选项样式在网络浏览器中是一团糟
至少你可以通过添加来创建缩进

【解决方案2】：

这对于纯 html 是不可能的。少数浏览器（mozilla）可以让您使用 css 实现类似的功能，但在撰写本文时，大多数浏览器（webkit 等）不支持 html 选择元素的样式。

但是，有许多 javascript 库旨在增强 html-select 小部件并提供缺少的功能，例如您所要求的功能。仅举几例：

【讨论】：

来自Select2 docs：“此外，<optgroup> 元素无法选择。这是 HTML 规范的限制，不是 Select2 可以克服的限制。”

【解决方案3】：

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

在选择的子项上允许使用类属性，但样式是否/如何应用于元素在浏览器和浏览器版本之间存在很大差异。
以为前缀将导致如果选择元素比选择的选项窄，则视觉效果将不令人满意，可读文本隐藏在右侧（参见下面的示例）。
您应用的任何样式都不一定符合浏览器用户已经习惯的样式。粗斜体是Firefox，但不一定是每个浏览器。许多浏览器应用包括灰色在内的样式，以帮助指示 optgroup 不可选择
用户不一定会期望选择 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>

.my-select {
  width: 60px;
}

<select class="my-select">
  <option>Parent</option>
  <option selected="selected">&nbsp;&nbsp;&nbsp;Child</option>
</select>

【讨论】：

除非你想走图书馆路线，否则这是迄今为止我最喜欢的解决方案。谢谢！
很好的信息，但关于哪条路线最好的结论很大程度上取决于开发人员所追求的：他们针对的是哪些浏览器，他们是尝试重新创建 optgroup 还是只是选项卡项目，以及用例的其他各个方面。

【解决方案4】：

有点不同的解决方案..

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

【讨论】：

不是最漂亮的实现，但它产生了预期的结果。 :-)

【解决方案5】：

@grifos 的答案在 WebKit 浏览器中不受支持，并且在 IE 11 中测试时不起作用。

一个建议可能是使用 Unordered/Ordered 列表并使用 CSS 设置样式，然后使用 JavaScript/jQuery 添加功能。

过去我见过一个很好的实现，它看起来真的很漂亮！

【讨论】：

【解决方案6】：

这将给人一种带有可选 optgroup 的下拉列表的感觉。让它很简单，但你可以随心所欲地设计。

.hide {
  display:none;
}
.show {
  display:block;
}
.selected.button {
  display:block;
  font-weight: bold;
}
button {
  text-align: left;
  min-width: 200px;
  margin-left: 10px;
  border: 0px;
  background: #eee;
  display: block;
}
#value_display {
  width: 210px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-left: 8px;
}
</style>
<html>
<body>


<!-- Div is a display and also trigger for displaying dropdown -->
<div id="value_display" onclick="showOptions(this.value)">
  opt 0
</div>

<!-- setting height and doing overflow-y allows dropdown list with scrollbox -->
<div id="select_div" class="hide" style="height: 80px; overflow-y: scroll;">

<button class="selected button" onclick="select(this.id)" id="opt 0">opt 0</button>
<button onclick="select(this.id)" id="opt 0-1" style="padding-left: 15px">opt 0-1</button>
<button onclick="select(this.id)" id="opt 0-2" style="padding-left: 15px">opt 0-2</button>
<button onclick="select(this.id)" id="opt 0-3" style="padding-left: 15px">opt 0-3</button>
<button onclick="select(this.id)" id="opt 0-4" style="padding-left: 15px">opt 0-4</button>
<button class="" onclick="select(this.id)" id="opt 1">opt 1</button>
<button onclick="select(this.id)" id="opt 1-1" style="padding-left: 15px">opt 1-1</button>
<button onclick="select(this.id)" id="opt 1-2" style="padding-left: 15px">opt 1-2</button>
<button onclick="select(this.id)" id="opt 1-3" style="padding-left: 15px">opt 1-3</button>
<button onclick="select(this.id)" id="opt 1-4" style="padding-left: 15px">opt 1-4</button>

<script>

var showingOptions = false;
var showingID = document.getElementById('value_display').innerHTML;

function showOptions() {
 if(showingOptions) {
   document.getElementById('select_div').className = "hide";
   showingOptions = false;
 }
 else {
   document.getElementById('select_div').className = "show";
   showingOptions = true;
 }
}
function select(id){
  document.getElementById(id).className = 'selected button';
  document.getElementById(showingID).className = 'show';
  showingID = id;
  document.getElementById('value_display').innerHTML = id;
  document.getElementById('select_div').className = 'hide';
}

</script>

【讨论】：

【解决方案7】：

这个问题不是很清楚，但这是你要找的：

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

【讨论】：

抱歉不够清楚。我希望 optgroup 可以像您选择选项一样选择