在下拉列表中選擇optgroup標籤

我打算爲主要車型（瑞典汽車）提供簡要說明頁面。我還想表明，沃爾沃和薩博在下拉菜單中屬於瑞典汽車。然後當我點擊沃爾沃時，它應該導航到沃爾沃描述頁面。我如何顯示最初選擇的optgroup標籤？

謝謝。在下拉列表中選擇optgroup標籤

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

來源

2015-04-25 ah gal

你只是想'optgroup'的背景是亮點以某種方式？ – hungerstar

optgroup不可點擊。儘管只使用選項標籤和css可以獲得相同的效果。見http://stackoverflow.com/questions/9892247/selectable-optgroup-in-html-select-tag –

嗨hungerstar。是。我希望optgroup（這是瑞典汽車）在下拉列表中突出顯示。 –

我相信你問什麼會呈現這樣的：

enter image description here

這不是嚴格可能因爲你不能「選擇」選項組標籤。爲了達到你想要的效果，你必須執行一些小技巧。

我們可以把一個自定義標籤成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/

來源

2015-04-25 08:11:58 JDandChips

另一種解決方案是將有第一個選項是一樣的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/

來源

2018-02-15 10:02:56 milesholt

在下拉列表中選擇optgroup標籤

回答

相關問題