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 回答