Question

这是我的问题：

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

HTML

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

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

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

脚本

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

但仍然存在一个小问题：如果我选择Hello然后获得Hello选项 - 焦点将保持不变并且蓝色突出显示。但如果我选择你好，那么世界选择 - 一切都有效.. 我读到对于选择菜单，当选择一个选项时会发生更改事件!!!但该选项必须与之前选择的选项不同才能触发更改事件。

即使您再次选择相同的选项，是否有任何方式不会出现此蓝色突出显示。

Answer 1

您可以对选择选项使用点击事件，假设select具有ID select：

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

DEMO：http://jsfiddle.net/DJCe7/

修改

如果动态添加选项，则执行（假设select具有id select：）

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

编辑2

按Enter键获得相同的结果：

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

DEMO：http://jsfiddle.net/DJCe7/10/

Answer 2

如何在焦点上模糊它？不知道这会在IE中表现如何。

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

http://jsfiddle.net/b26f5/

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

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

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

我怎样才能改变IE中select标签的这种行为

2 个答案: