有没有办法让选项组可选?
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
答案 0 :(得分:49)
我认为你不能,但你可以轻松地用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元素相同。
答案 1 :(得分:9)
普通的html无法做到这一点。一些浏览器(mozilla)允许你使用css实现类似的东西,但在撰写本文时,大多数浏览器(webkit,et.al)都不支持html选择元素的样式。
但是,有许多javascript库旨在增强html选择小部件并提供缺少的功能,例如您要求的功能。仅举几例:
答案 2 :(得分:3)
在html标准支持之前,给出的任何和所有答案都存在问题,包括:
这使我得出结论解决问题的最佳方法是使用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>
答案 3 :(得分:2)
一个不同的解决方案..
.optionGroup {
font-weight: bold;
}
&#13;
<select>
<option value="0" class="optionGroup">Parent Tag</option>
<option value="1"> Child Tag1</option>
<option value="2"> Child Tag2</option>
</select>
&#13;
答案 4 :(得分:0)
一个建议可能是使用Unordered / Ordered列表并使用CSS设置样式,然后使用JavaScript / jQuery添加功能。
过去我看过很好的实现,它看起来很漂亮!
答案 5 :(得分: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>
答案 6 :(得分:-3)
问题不是很清楚,但这就是你要找的东西:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>