2

这是我的问题：

我有一个带有两个选项的选择标签 - “Hello”和“World”

html

<select>
<option> Hello </option>
<option> World </option>
</select>

在 IE 中，当您选择一个选项并且它成为选定选项时，蓝色突出显示保持不变，直到您单击选择标记之外的其他位置。（在 Firefox 中不是这样）

所以我写了一个脚本，当一个选项被选中时，它会从元素中移除焦点。

脚本

$('select').change(function() {
        $(this).blur();

但是仍然存在一个小问题：如果我选择 Hello 然后获得 Hello 选项 - 焦点将保留并且蓝色突出显示。But if I choose hello and then world option -everything works.. I read that For select menus, the change event occurs when an option is selected!!!But the option has to be different from the previous selected to trigger the change event.

即使您再次选择相同的选项，有什么办法不会出现这种蓝色突出显示。

4

2 回答 2

5

您可以在选择选项上使用单击事件，假设 select 具有 id select：

$('option').click(function() {
    $('#select').blur();
});

演示：http: //jsfiddle.net/DJCe7/

编辑

如果选项是动态添加的，那么做（假设 select 有 id select:)

$('#select').on('click', 'option', function() {
    $('#select').blur();
});

编辑 2

按回车得到相同的结果：

$('#select').keydown(function(event) {
    // Enter pressed
    if(event.keyCode == 13) {
        $('select').blur();
    }
});

演示：http: //jsfiddle.net/DJCe7/10/

于 2013-03-04T10:55:55.517 回答
-1

把它模糊成焦点怎么样？不过，不确定这在 IE 中会如何表现。

$('select').focus(function() {
   $(this).blur();
});

http://jsfiddle.net/b26f5/

编辑：愚蠢的我，你实际上可以用 CSS 删除轮廓。无需使用Javascript！

select, select:focus, select:active { outline: none; }

http://jsfiddle.net/b26f5/1/

于 2013-03-04T10:54:17.083 回答