Question

在.html()内更改<option> <select>时使用jQuery（我之前已将selectedIndex属性设置为-1）重置{{1} } selectedIndex的属性，从“<select>”到“-1”

http://jsbin.com/filowe/2/edit?html,output

Answer 1

HTML5 spec：

中提到了这种情况

在设置时，selectedIndex属性必须将选项列表中所有选项元素的选择性设置为false，然后将索引为的选项列表中的选项元素设置为false。给定的新值（如果有）必须将选择设置为true，并将 dirtyiness 设置为true。


注意：即使在select元素没有多个属性且显示大小为1的情况下，这也可能导致没有选择性设置为true的元素。


...

如果插入节点或删除节点导致选项列表获得或丢失一个或多个选项元素，或者选项列表中的选项元素asks for a reset，那么，如果选择元素＆＃39 ; s多个属性不存在，select元素的显示大小为1，并且select元素的选项列表中没有选项元素将 selectedness 设置为true，即用户代理必须将树视图中未被禁用的选项列表中的第一个选项元素的选择性设置为true。

通过设置其innerHTML或textContent属性来更改选项会触发此重置（Firefox除外），但text属性（仅限<option>）不会触发它（IE上除外）。

// these triggers the <select> element's reset (except on Firefox)
$("#three")[0].innerHTML   = "foo";
$("#three")[0].textContent = "foo";

// this does not trigger the reset (except on IE)
$("#three")[0].text = "foo";

Firefox更严格地遵循规范，如果有新的<select>，它只会重置<option>，或者删除其中一个<option>。但是，在将<option>的{{1}}属性设置为false（但that should trigger重置也是如此）时，它无法执行重置。

简而言之，所有当前浏览器都无法完全实现规范，因此唯一的跨平台解决方法是将selected更改为select（及其后代元素）上的最后一个操作：

selectedIndex

Answer 2

各种浏览器的行为都不同。我刚刚检查了Firefox，它没有任何错误。它向我显示了一个空的下拉列表，我检查了所选的索引是-1。但结果在Chrome中并不相同。

理想情况下，在启动时未选择任何选项时，-1用于选择。我不确定是否可以在所有浏览器中以编程方式设置-1。

更改选项的HTML不会触发更改事件，如果可以的话 - 以下代码将最终运行无限循环。

var i = 0;
$(".drpmnu").change(function (e) {
    i++;
    $('#three').html("data" + i);
})

Answer 3

首先，我研究了JQuery .html()函数，但找不到任何可能导致问题的函数。然后我试着change innerHTML property without jquery（这是我应该先做的）。它在Firefox 33.1和34.0.5上看起来不错，但是使用Chrome 40.0.2214.94，IE 10和Opera 27.0.1689.66重置selectedIndex。

我认为这证明@Blake Plumb的评论对某些浏览器来说是正确的。

这是一个重复的问题。当您更改选项的文本时，会导致选择重绘。在重绘中有一个问题，即道具重置为默认值。

Answer 4

这是因为您在预设索引后设置了$('#three')的HTML内容。因此，如果要保留-1的索引，请重新排列代码以按顺序加载。

<script>
    $('#three').html("moo");
    $(".drpmnu").prop('selectedIndex', -1);
</script>

元素值更改时会自动触发onchange事件。因此，重置索引。

更改<option>的.html（）会将</option> <option>的selectedIndex属性从'-1'重置为'0'</option>

4 个答案: