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

use*_*221 2 javascript jquery internet-explorer

这是我的问题:

我有一个选择标签有两个选项 - "你好"和"世界"

HTML

<select>
<option> Hello </option>
<option> World </option>
</select>
Run Code Online (Sandbox Code Playgroud)

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

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

脚本

$('select').change(function() {
        $(this).blur();
Run Code Online (Sandbox Code Playgroud)

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

即使你再次选择相同的选项,这种蓝色突出显示是否有任何方式不会发生.

iap*_*dev 5

您可以对选择选项使用click事件,假设select具有id select:

$('option').click(function() {
    $('#select').blur();
});
Run Code Online (Sandbox Code Playgroud)

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

编辑

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

$('#select').on('click', 'option', function() {
    $('#select').blur();
});
Run Code Online (Sandbox Code Playgroud)

编辑2

按Enter键得到相同的结果:

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

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