在下拉列表中选择 optgroup 标签答案

【问题标题】：Making optgroup label as selected in dropdown在下拉列表中选择 optgroup 标签
【发布时间】：2015-04-25 04:01:58
【问题描述】：

我打算为主要汽车类型（瑞典汽车）放置一个简短的描述页面。我还想在下拉列表中显示沃尔沃和萨博在瑞典汽车下。然后当我点击沃尔沃时，它应该导航到沃尔沃描述页面。如何显示最初选择的 optgroup 标签？

谢谢。

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
</select>

【问题讨论】：

您是否只想以某种方式突出显示optgroup 的背景？
optgroup 不可点击。尽管您可以仅使用选项标签和 css 获得相同的效果。见stackoverflow.com/questions/9892247/…
嗨饥饿之星。是的。我希望在下拉列表中突出显示 optgroup（即瑞典汽车）。

标签： html css

【解决方案1】：

另一种解决方案是让第一个选项与 optgroup 标签相同，然后在下拉菜单处于焦点时将其隐藏。

<div class="select-wrapper">
<select>
   <optgroup class="swe-car" label="Swedish Cars">
     <option value="swedish-cars">Swedish Cars</option>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
</select> 
</div>

$().ready(function(){    
    $('select').focus(function(){
       $('select option').eq(0).hide();
    });
});

https://jsfiddle.net/atbqtnq8/13/

【讨论】：

【解决方案2】：

我相信您所要求的会呈现如下：

这严格不可能，因为您不能“选择”选项组标签。要获得您想要的效果，您必须使用一些技巧。

我们可以将自定义标签放入span 并将此范围绝对定位在select 上，以使初始选择出现为选项组标签。之后，我们需要一点 javascript 来伪造 click 和 change 事件，您可以在下面看到一个工作示例。但是，这就是您的 html 的外观：

<div class="select-wrapper">
 <span>Swedish Cars</span>
 <select>
  <optgroup class="swe-car" label="Swedish Cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
  </optgroup>
 </select> 
</div>

https://jsfiddle.net/atbqtnq8/

【讨论】：

【解决方案3】：

这个怎么样？我复制另一个问题的答案Selectable <optgroup> in HTML <select> tag

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}

<select>
    <option value="Swedish Cars" class="optionGroup">Swedish Cars</option>
    <option value="volvo" class="optionChild">volvo</option>
    <option value="saab" class="optionChild">saab</option>
</select>

【讨论】：