如何突出顯示下拉菜單中的選項？

我有一個select其中的一些值。每個值加載一個不同的網頁。如何突出顯示下拉菜單中的選項？

我希望總是顯示爲「選擇頁面」的默認值。

如何在用戶點擊下拉菜單時突出顯示當前頁面的選項？

通過突出顯示我的意思是要麼選擇它或更改其背景顏色或什麼。

HTML：

<select id="siteId" name="siteId" onchange="....."> 
    <option value="">Select a page</option> 
    <option row="1" value="68067">MAIN SITE</option> 
    <option row="2" value="88616">A</option> 
    <option row="3" value="88617">B</option> 
</select>

編輯：這個選擇是動態創建。我只能在頁面渲染後用java-script編輯它

來源

2012-12-05 code511788465541441

你有什麼代碼，使遠嗎？ –

使用選定的屬性？ – epascarello

使用類屬性？ – lnrbob

如果您正在尋找jQuery解決方案，那麼:eq()和attribute selector將是您尋找的最佳選擇。我做了什麼：http://jsbin.com/ojexuh/1/edit

先用:eq()

$('select option:eq(2)').css({"background":"green", "color":"white"});

和attribute selector像這樣的：

$('select option[row="1"]').css({"background":"red", "color":"yellow"});

來源

2012-12-05 16:32:45 Jai

將selected =「selected」設置爲您想要作爲默認選項的選項。

<option row="3" value="88617" selected="selected">B</option>

來源

2012-12-05 16:20:17 ADITHYAN

option確實支持select內的背景顏色。我只是設置了一個簡單的課程來突出顯示它，如here所示。

您可以添加一類這樣的

$('current page selector').addClass('current');

你也只是手動與css功能設置

$('current page selector').css('background-color', 'red');

你真的沒有足夠的信息，我幫你確定如何找到當前頁面。我建議您通過option的值來告訴您可以將其與當前的window.location進行比較。

來源

2012-12-05 16:22:04 Snuffleupagus

在OS X上的Chrome或Safari中不起作用。 – svidgen

@svidgen有趣。那是OS X中的任何瀏覽器還是Webkit？ – Snuffleupagus

我只測試過FF，Chrome和Safari。我假設它是任何使用** OS X **下拉控件的瀏覽器。 – svidgen

瀏覽器+操作系統對此有很大的變化。以瀏覽器爲例，下拉似乎並不接受在OS X上的任何造型，但在Windows，背景顏色既可以在樣式表和內聯樣式屬性來分配：

<style type='text/css'> 
    .highlighted { 
     background-color: yellow; 
    } 
</style> 

<select name='whatever'> 
    <option value='1'>one</option> 
    <option value='2'>two</option> 
    <option value='3' style='background-color: green;'>three</option> 
    <option value='4' class='highlighted'>four</option> 
</select>

同樣，兩種方法的工作在Windows上，在OS X上都沒有。

如果您想要一個可以在任何地方工作的解決方案，您需要構建自己的下拉控件。

來源

2012-12-05 16:25:42 svidgen

如何突出顯示下拉菜單中的選項？

回答

相關問題