選擇一個OPTGROUP標題作爲可選項

我有一個下拉列表（但有很多很多的選項）舉辦像這樣的數據的樹：選擇一個OPTGROUP標題作爲可選項

pizza 
    pizza.mediterranean 
    pizza.veggie 
    pizza.meatlover 
drinks 
    drinks.soda 
    drinks.soda.pepsi 
    drinks.soda.coke 
    drinks.beer 
    drinks.water

我想更大的類別（比薩，飲品）至顯示爲optgroups，但我希望能夠在下拉列表中選擇optgroup作爲選項。我讀過的多個地方是optgroups僅用於分組，不能被選中。

因爲我還想要多個級別的縮進以允許下拉看起來儘可能接近上面的示例 - 可能optgroups不是要走的路，而是一個css解決方案。在Firefox中，我可以通過向選項添加樣式並使其變爲粗體和/或具有左填充來做到我想要的操作，但它似乎在webkit中，我可以在下拉菜單中更改選項的唯一屬性是它們的顏色。

有沒有人知道我可以在webkit（chrome/safari）和firefox ---（我現在不太在乎IE）時使用optgroups，css或其他任何東西來達到這種效果？

來源

2012-07-13 hackartist

你可能只想去低科技：

<select> 
<option>Root</option> 
<option>&nbsp;&nbsp;Second level</option> 
<option>&nbsp;&nbsp;&nbsp;&nbsp;Third level</option> 
</select>

你打的，你可以用一個真正的選擇做了限制。從概念上講，這些選擇部件是由操作系統繪製的（儘管一些瀏覽器 - firefox - 有自己的實現），所以樣式選項是有限的。

有很多很好的選擇替代品。我最熟悉的是jqueryui的autocomplete。它快速靈活，您可以根據自己的喜好設計風格。人們可以想象使用jQuery或其他工具包的其他本土解決方案 - 或簡單的'ol JavaScript。

來源

2012-07-13 21:15:05 Julian

這是讓它在所有瀏覽器上都能正常工作的絕對方式，但它不允許任何樣式使事物像一個optgroup一樣大膽...... – hackartist 2012-07-13 21:37:18

點頭，添加了一些其他想法來回答更多高級選項.. – Julian 2012-07-13 21:52:13

使用一組單選按鈕（或複選框，如果幾個選擇是被允許），而不是一個select元素，您可以組織和他們的風格像任何其他內容，例如與縮進和粗體。但它不會作爲下拉菜單，但這實際上可以提高可用性和可訪問性。

來源

2012-07-14 06:28:25

選擇一個OPTGROUP標題作爲可選項

回答

相關問題