0

我有一个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 编辑它

4

4 回答 4

1

option确实支持select. 我只是设置了一个简单的类来突出显示它，如通过这里看到的。

你可以像这样添加一个类

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

您也可以使用该css功能手动设置它

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

您确实没有足够的信息让我帮助您确定如何找到当前页面。我建议有一些方法可以从option你可以与当前比较的值来判断window.location。

于 2012-12-05T16:22:04.483 回答
1

浏览器+操作系统对此的支持有很多变化。以 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。

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

于 2012-12-05T16:25:42.873 回答
1

如果您正在寻找 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-05T16:32:45.747 回答
0

为您希望成为默认选项的选项设置 selected="selected"。

<option row="3" value="88617" selected="selected">B</option>
于 2012-12-05T16:20:17.533 回答