可以在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">&nbsp;&nbsp;&nbsp;Child Tag1</option> <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option> </select> 

在html标准支持之前,所有给出的答案都是有问题的,包括:

  1. 一个select的子元素允许使用类属性,但是如果/如何将元素应用到元素,则在浏览器和浏览器版本之间变化很大。
  2. 使用&nbsp;前缀 将会产生这样的结果:如果select元素比select的选项更窄,则视觉效果将不令人满意,可读文本隐藏在右边(参见下面的示例)。
  3. 你所应用的任何风格都不一定适合浏览器用户习惯的风格。 大胆和斜体是Firefox,但不一定是每个浏览器。 许多浏览器应用包括灰色的样式,以帮助指示optgroup不可选
  4. 用户不需要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">&nbsp;&nbsp;&nbsp;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>