Question

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

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

Answer 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元素相同。

Answer 2

普通的html无法做到这一点。一些浏览器（mozilla）允许你使用css实现类似的东西，但在撰写本文时，大多数浏览器（webkit，et.al）都不支持html选择元素的样式。

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

Answer 3

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

在select的子节点上允许类属性，但是在浏览器和浏览器版本之间，样式应用于元素的方式/方式差别很大。
使用＆amp; nbsp;进行前缀结果是如果select元素比选择的选项更窄，视觉效果将不会令人满意，可读文本隐藏在右边（见下面的例子）。
您应用的任何样式都不一定适合浏览器用户已习惯的样式。大胆和斜体是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>

Answer 4

一个不同的解决方案..

＆＃13;

.optionGroup {
    font-weight: bold;

}

＆＃13;

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

＆＃13;

Answer 5

WebKit浏览器不支持@ grifos的答案，并且在IE 11中测试时无效。

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

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

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

Answer 7

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

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

可在HTML <select>标记</select> </optgroup>中选择<optgroup>

7 个答案: