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

时间:2012-03-27 15:06:19

标签: html html-select optgroup

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

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

7 个答案:

答案 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标准支持之前,给出的任何和所有答案都存在问题,包括:

  1. 在select的子节点上允许类属性,但是在浏览器和浏览器版本之间,样式应用于元素的方式/方式差别很大。
  2. 使用&amp; nbsp;进行前缀结果是如果select元素比选择的选项更窄,视觉效果将不会令人满意,可读文本隐藏在右边(见下面的例子)。
  3. 您应用的任何样式都不一定适合浏览器用户已习惯的样式。大胆和斜体是Firefox,但不一定是每个浏览器。许多浏览器应用包括灰色的样式以帮助指示optgroup不可选
  4. 用户不一定期望选择optgroup标签的概念。
  5. 这使我得出结论解决问题的最佳方法是使用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>

答案 3 :(得分:2)

一个不同的解决方案..

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

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

一个建议可能是使用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>