可以在HTML <select>标签中select<optgroup>
有没有办法使选项组可选？
<select> <optgroup value="0" label="Parent Tag"> <option value="1">Child Tag</option> <option value="2">Child Tag</option> </optgroup> </select> 我不认为你可以，但你可以很容易地重现与CSS的视觉风格，因此只有在select的选项，所以一切都是可选的。
.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>
这是不可能的纯HTML。 less数浏览器（mozilla）可以让你用css实现类似的function，但是在写这篇文章的时候，大多数浏览器（webkit，et.al）都不支持html select元素的样式。
但是，有一些JavaScript库旨在增强htmlselect小部件，并提供缺less的function，如您所要求的。 仅举几例：
- select二
- select
- jQuery UI SelectMenu
一个不同的解决scheme..
.optionGroup { font-weight: bold; }
<select> <option value="0" class="optionGroup">Parent Tag</option> <option value="1"> Child Tag1</option> <option value="2"> Child Tag2</option> </select>
在html标准支持之前，所有给出的答案都是有问题的，包括：
- 一个select的子元素允许使用类属性，但是如果/如何将元素应用到元素，则在浏览器和浏览器版本之间变化很大。
- 使用＆nbsp;前缀 将会产生这样的结果：如果select元素比select的选项更窄，则视觉效果将不令人满意，可读文本隐藏在右边（参见下面的示例）。
- 你所应用的任何风格都不一定适合浏览器用户习惯的风格。 大胆和斜体是Firefox，但不一定是每个浏览器。 许多浏览器应用包括灰色的样式，以帮助指示optgroup不可选
- 用户不需要selectoptgroup标签的概念。
这导致我总结出解决问题的最好方法是使用像UI-Selectable这样的库来访问整个站点（为了一致性），或者使用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; }
<select class="my-select"> <option>Parent</option> <option selected="selected"> Child</option> </select>
WebKit浏览器不支持@ grifos的答案，在IE 11中testing时不起作用。
一个build议可能是使用Unordered / Ordered列表，并使用CSS进行devise，然后使用JavaScript / jQuery添加function。
过去我已经看到了一个很好的实现，它可以看起来很光滑！
这将给出一个下拉列表与selectoptgroups裸露的感觉。 离开它很平淡，但你可以风格给你的内心的内容。
.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>
<select multiple="multiple"> <optgroup label="Group 1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </optgroup> <optgroup label="Group 3"> <option value="15">15</option> </optgroup>
欲了解更多信息请参阅此链接===> https://jsfiddle.net/apurv195/8ew4Lugb/
这个问题不是很清楚，但这是你在找什么：
<select multiple="multiple"> <optgroup label="Parent Tag"> <option value="1">Child Tag</option> <option value="2">Child Tag</option> </optgroup> </select>
