Question

我有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脚本编辑它

Answer 1

option支持select中的背景色。我只是设置了一个简单的类来突出显示它，如here所示。

您可以添加类似这样的课程

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

您也可以使用css功能

手动设置它

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

您确实没有足够的信息来帮助您确定如何查找当前页面。我建议您根据option的值来判断一下，您可以将其与当前window.location进行比较。

Answer 2

浏览器+操作系统支持有很多变化。以Chrome为例，下拉列表似乎不接受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.

如果您想要一个适用于所有地方的解决方案，您需要构建自己的下拉控件。

Answer 3

如果您正在寻找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"});

Answer 4

为您想要的选项设置selected =“selected”。

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

如何在下拉菜单中突出显示选项？

4 个答案: