如何處理不同瀏覽器中optgroup的不同行爲？

我期待能夠輕鬆地添加功能，能夠在select如何處理不同瀏覽器中optgroup的不同行爲？

<select id="MySelect" name="MySelect"> 
    <option value="">Select ...</option> 
    <optgroup label="Group1" data-id="Group1"> 
     <option selected="selected" value="1">Value 1</option> 
     <option value="2">Value 2</option> 
    </optgroup> 
    <optgroup label="Group2" data-id="Group2"> 
     <option value="3">Value 3</option> 
     <option value="4">Value 4</option> 
    </optgroup> 
</select>

上optgroup點擊直接與支撐jQuery

$("#MySelect").on('click', 'optgroup', function() { 
    alert($(this).data('id')); 
});

和CSS：

#MySelect optgroup { 
    background-color: orange; 
    cursor: pointer; 
}

Jsfiddle here

然而：

鉻38忽略cursor CSS爲optgroup，並忽略該事件單擊完全
火狐32榮譽cursor CSS和直接忽略點擊事件上optgroup。
IE 11火災的optgroup當點擊點擊事件，但data-id報告最後選擇的「選項」的optgroup，這將是錯誤的，除非最後一個孩子的選擇是無心插柳父optgroup下方。

在jQuery 2.1.0，IE和Firefox會提高點擊事件，如果被點擊的optgroup以下孩子的選擇之一，但不是瀏覽器。

這三個瀏覽器對於應用於optgroup的背景css顏色是否應應用於子節點selects也有不同意見。

而且更不用說缺乏支持nested optgroups

然後導致的alternative hacks的做法optgroup喜歡在不同的CSS樣式選擇 option縮進爲group headers，它失去鍵盤選擇可用性。

TL; DR
所以我的問題是，因爲至少4.01~~optgroup已經在HTML但似乎一直停留在笨伯角落（附件A：到OPTGROUP上bottom of the W3C wiki的鏈接提供了404 ）。爲什麼是這樣？~~，那麼是否有解決方案（例如library - modernizr，jQuery-plugin），直到optgroup被標準化爲止？

編輯

這裏的CSS的小提琴的照片與4個瀏覽器我已經在Windows 8.1的PC上得到了方差 - 只有FF顯示光標; FF和IE也將OptGroup的background-color應用於選項。

CSS differences for Opgroup

來源

2014-11-01 StuartLC

只是因爲。但真正關心的是，爲什麼這可能是無法回答的。在一天結束時，可能最需要知道的是如何編寫允許這些差異的代碼。「爲什麼瀏覽器採用不同的方式」可能需要幾本書才能回答。請注意，這不是真正的問題，而是瀏覽器製造商在瀏覽器中實現的東西。 – 2014-11-01 11:44:28

如果你正在尋找一個更抽象的分析爲什麼它是不同的，我也會考慮發佈原始問題的程序員或超級用戶。SO更適合於具體的簡明答案imho – 2014-11-01 11:46:56

我將q從「爲什麼」改爲「如何處理」，因爲當我們談論多個製造商實施不同的事情時，沒有單一的答案。瀏覽器實現不同的東西。看到netscape/ie和所有的後續。 – 2014-11-01 11:48:50

我要在這裏放置一個答案，並試着給一個小角度。 HTML中的optgroup標記不能被點擊，選擇或使用。它意味着成爲用戶理解一組特定選項與前一組選項不同的指導工具。由於您很可能意識到這一點，因此我提供這些信息是爲了引導您瞭解我所提供的信息。

(function($){ 
    $(document).on('change','#MySelect',function(){ 
     var test = $(this).find(':selected').parent().data('id'); 
     console.log(test); 
    }); 
}(jQuery));

此代碼將從optgroup的data註冊id值當用戶selects的選項。這比點擊optgroup的人更有可能發生。考慮用戶如何看你的數據。他們會查看選擇並查看分離的數據。他們可以使用optgroup作爲他們想要的正確選項的指南，但他們不太可能嘗試點擊它。

我想你想提供某種信息事件與這些optgroup和傷心，我不知道如何提供。聆聽change事件可能是您提供有關信息的最佳機會，並提供您的彈出窗口，信息文本或您能想到的任何事情以獲得強大的觀點。

請在評論中提供更多信息以幫助我爲您提供幫助。我不明白你的目標和你爲什麼要這個功能，但我想嘗試，並幫助指導您正確的方向..

CSS編輯

所以，你提出了一個點關於CSS我想我有一個答案。想象一下optgroup作爲div元素和options作爲內部項目。現實中，它們是以任何方式佈置的，所以不應該很難想象這一點。

現在...當你給的optgroup的CSS說：background: red：僅optgroup本身應該轉換，但在現實中optgroup正在其內容的高度option裏面裝的。或內在的元素。在大多數瀏覽器中，我會假設（由於optgroup很少使用），option標籤的默認背景顏色爲transparent，允許select的背景顏色爲white或#ffffff。在這種情況下，options似乎會採用optgroup的顏色，但實際上它們沒有基礎。通過改變CSS來爲我們解決這個問題的選項設置默認值。

option{ 
    background: #fff; 
}

在IE，火狐和Chrome的所有版本這消除了紅色，你從optgroup看到。

來源

2014-12-23 16:27:14

我沒有看到任何瀏覽器CSS的問題我已經測試過（除IE和I don真的不支持IE很多...）。所以不確定要說什麼關於你的問題的CSS方面。 – 2014-12-23 16:33:52

感謝您的回答！我已經添加了一張圖片，顯示了提供的小提琴上的CSS差異。你演示了哪個瀏覽器？ – StuartLC 2014-12-23 18:41:18

說這很有趣...我做了Chrome和Firefox，但是Firefox現在遇到了問題，因爲之前我沒有它，所以這很有趣。去看看，因爲我發佈後沒有任何變化..但Chrome本質上（不完全）相同的Safari瀏覽器，我沒有Safari瀏覽器在這裏下載。我做了所有版本的IE，但是又一次證明了它在所有版本中都發生了。 – 2014-12-23 18:46:28

如何處理不同瀏覽器中optgroup的不同行爲？

回答

相關問題