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

Selectable <optgroup> in HTML <select> tag

提问by marcin_koss

Is there any way to make the option group selectable?

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

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

采纳答案by grifos

I don't think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable.

我认为您不能，但是您可以使用 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>

The multiple attribute allow you to select more than one row (with ctrl click). You can remove it if it is not what you want. It was to show you that everything became selectable and that is looking the same as with optiongroup element.

multiple 属性允许您选择多于一行（使用 ctrl 单击）。如果它不是您想要的，您可以将其删除。这是为了向您展示所有内容都可以选择，并且看起来与 optiongroup 元素相同。

回答by Coleman

This is not possible with plain html. A few browsers (mozilla) would allow you to achieve something similar using css, but at the time of this writing the majority of browsers (webkit, et.al) do not support styling of html select elements.

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

However there are a number of javascript libraries designed to enhance html-select widgets and provide missing features such as the one you've requested. To name a few:

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

• Select2
• Chosen
• jQuery UI SelectMenu

• 选择2
• 选择
• jQuery UI 选择菜单

回答by Brent

Until this is supported in an html standard, any and all answers given have been problematic, including:

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

1. Class attributes are allowed on the children of a select, but if/how the style is applied to the element varies enormously between browsers and browser versions.
2. Prefixing with &nbsp; will have the consequence that if the select element is narrower than the selected option, the visual effect will not be pleasing, with readable text hidden off to the right (see example below).
3. Any style you apply will not necessarily fit with the styling the user of the browser has become accustomed to. bold and italic is Firefox, but not necessarily every browser. Many browsers apply a style including gray color in order to help indicate the optgroup is NOT selectable
4. The concept of a select optgroup label will not necessarily be expected by the user.

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

This has lead me to conclude the best way to work around the problem is either to use a library like UI-Selectable for all selects throughout your site (for consistency), OR use the first option in the optgroup to represent selecting all the children, with a clear description (such as 'ALL Swedish cars'):

这使我得出结论，解决该问题的最佳方法是对整个站点中的所有选择使用 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>

回答by Yura Gymenetskiy

a little different solution..

有点不同的解决方案..

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

回答by Steven Kaspar

This will give the bare feel of a dropdown list with selectable optgroups. Left it very plain but you can style to your hearts content.

这将给人一种带有可选选项组的下拉列表的感觉。让它非常简单，但您可以根据自己的喜好进行设计。

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

回答by mgilberties

@grifos's answer is not supported in WebKit Browsers and did not work when Tested in IE 11.

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

One suggestion might be to use an Unordered/Ordered list and to style it with CSS, then add the functionality with JavaScript/jQuery.

一个建议可能是使用无序/有序列表并使用 CSS 对其进行样式设置，然后使用 JavaScript/jQuery 添加功能。

I have seen a nice implementation of this in the past, it can look really slick!

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

回答by nathanjosiah

The question is not very clear but is this what you are looking for:

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

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