问问题
90861 次
7 回答
64
我不认为你可以，但你可以很容易地用 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 元素相同。
于 2012-03-27T15:15:42.797 回答
11
这对于纯 html 是不可能的。少数浏览器（mozilla）允许您使用 css 实现类似的功能，但在撰写本文时，大多数浏览器（webkit，et.al）不支持 html 选择元素的样式。
但是，有许多 javascript 库旨在增强 html-select 小部件并提供缺少的功能，例如您所要求的功能。仅举几例：
于 2014-12-03T14:14:56.593 回答
7
在 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"> Child</option>
</select>于 2016-08-16T09:21:34.800 回答
4
有点不同的解决方案..
.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>于 2016-07-19T14:04:52.420 回答
1
@grifos 的答案在 WebKit 浏览器中不受支持，并且在 IE 11 中测试时不起作用。
一个建议可能是使用 Unordered/Ordered 列表并使用 CSS 设置样式，然后使用 JavaScript/jQuery 添加功能。
过去我见过一个很好的实现，它看起来真的很漂亮！
于 2014-04-16T08:24:57.327 回答
0
这将给人一种带有可选 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>
于 2015-08-03T18:01:21.180 回答
-6
这个问题不是很清楚，但这是你要找的：
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
于 2012-03-27T15:08:42.180 回答