2

嗯,这是一个有趣的。

所以我发现了 Internet Explorer 9 中的一个不一致之处,这让我在前几天陷入了困境。令我沮丧的是,它在 FireFox 和 Chrome 中工作,因为大多数 Web 开发人员都知道使用 IE 的开发人员工具进行脚本调试非常棒!

当我尝试动态地将选项添加到选择元素然后尝试聚焦该选项时,我看到了这一点。似乎 IE 忽略了我关注我的新元素的呼吁。为了帮助说明这个问题,我举了两个例子:

第一个场景(在 IE 中不起作用的场景)

我从一个有两个选项的选择开始:

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
</select>

然后,我使用 JQuery 向 select 添加一个新选项,并尝试使用以下.attr()方法选择它:

var $newOpt = $('<option>New Option</option>');
var $select = $('#select');
$select.prepend($newOpt);
$newOpt.attr('selected','selected');

在 Firefox 和 Chrome 中,这按预期工作。我的选项被添加到选择中,然后它被聚焦。但是,在 Internet Explorer 中,该选项只是附加的,而不是集中的。(见下面的演示)

第一个场景演示

第二个场景

我从一个包含三个选项的选择开始,默认情况下关注“选项 1”:

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
    <option id="new">New Option</option>
</select>

我使用 JQuery 来关注新选项:

var $newOpt = $('#new');
$newOpt.attr('selected','selected');

有趣的是,这适用于所有三种浏览器:Internet Explorer 9、FireFox 和 Chrome。(见下面的演示)

第二个场景演示

解决方法

我最终找到了一个最初并不那么明显的解决方法,因为当时我有很多复杂性围绕着这个问题。我最终使用:

$select.children().removeAttr('selected');

在尝试关注新添加的选项之前从选择中删除所有选定的属性。

变通示范

问题

我一直在网上搜索,但我在任何地方都没有找到这个文档,所以我想知道。它是一个错误吗?如果是这样,它是 JQuery 或 Internet Explorer 的错误吗?如果不是,我是否使用attr()错误的方法?

如果有人能对此有所了解,那就太好了。谢谢!

4

2 回答 2

2

尝试使用selectedIndex.

$(function () {
    var $newOpt = $('<option>New Option</option>');
    $('#select').prepend($newOpt).prop('selectedIndex', 0);
});

演示

这似乎是一个长期运行的IE 错误,未在 jquery 中修复。

虽然这在 IE 中有效

 $(function () {
    var newOpt = document.createElement('OPTION');
    newOpt.innerHTML = 'New Option';
    var select = document.getElementById('select');
    select.add(newOpt,select.options[0]);
    $('#select option:first').prop('selected', true);
});

演示

。添加

于 2013-06-04T01:24:35.757 回答
0

在这里你可以试试,这样..

函数添加项(){

var newOpt = $('<option selected="selected">New Option</option>');
$('#select').append(newOpt);

}

它无处不在...

在这里检查

于 2013-06-04T02:28:04.577 回答