javascript - 我怎样才能改变 IE 中选择标签的这种行为

Question

这是我的问题:

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

html

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

在 IE 中，当您选择一个选项并且它成为所选选项时，蓝色突出显示将一直保持，直到您单击选择标签之外的其他地方。 (在 Firefox 中不是这样)

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

脚本

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

但仍然存在一个小问题:如果我选择 Hello 然后获得 Hello 选项 - 焦点将保留并且蓝色突出显示。但是如果我选择 hello 然后 world 选项 - 一切正常..我读到对于选择菜单，选择一个选项时会发生更改事件!!!但是该选项必须与之前选择的选项不同才能触发更改事件。

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

Answer 1

您可以在选择选项上使用点击事件，假设选择具有 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/