Javascript 正在更改<；的.html（）；选项>；重置<；的selectedIndex属性；选项>；从'-1'；至'；0'；_Javascript_Jquery_Html_Dom

Javascript 正在更改<；的.html（）；选项>；重置<；的selectedIndex属性；选项>；从'-1'；至'；0'；

javascript jquery html dom

Javascript 正在更改<；的.html（）；选项>；重置<；的selectedIndex属性；选项>；从'-1'；至'；0'；,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,当在中更改的的.html（）（我之前已将selectedIndex属性设置为-1）时，使用jQuery将的selectedIndex属性从'-1'重置为'0' <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS

当在

中更改

的

.html（）

（我之前已将

selectedIndex

属性设置为

-1

）时，使用jQuery将

的

selectedIndex

属性从'

-1

'重置为'

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<select id="myselect" class="drpmnu">

   <option id="one" >(01)</option>

   <option id="two" >(02)</option>

   <option id="three" >(03)</option>

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


JS-Bin
(01)
(02)
(03)
$（“.drpmnu”）.prop（'selectedIndex'，-1）
$（'#三'）.html（“moo”）

这是因为在预先设置索引之后，您正在设置

$（“#三”）

的HTML内容。因此，如果要保留

-1

的索引，请按顺序重新排列要加载的代码

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


$（'#three'）.html（“moo”）；
$（“.drpmnu”）.prop（'selectedIndex'，-1）；

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

不同浏览器的行为不同。我刚刚登录了firefox，它没有任何错误。它向我显示了一个空下拉列表，我检查了所选索引是否为-1。但在铬合金中的结果却不一样

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

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

起初我研究了JQuery函数，但没有找到任何可能导致问题的东西。然后我试着（这是我应该先做的）。它在Firefox 33.1和34.0.5上看起来还可以，但在Chrome 40.0.2214.94、IE 10和Opera 27.0.1689.66上重置

selectedIndex

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

这是一个重新油漆的问题。更改选项的文本时，将导致选择重新油漆。在重绘过程中，存在道具重置为的问题默认值

本案例在以下章节中提到：

设置时，属性必须将选项列表中所有选项元素的selectedness设置为false，然后选项列表中索引为给定新值（如果有）的选项元素必须将其selectedness设置为true，Dirtines设置为true

注意：即使选择元素没有多个属性且显示大小为1，也不会导致任何元素的selectedness设置为true

如果插入节点或删除节点导致选项列表获得或丢失一个或多个选项元素，或者如果选项列表中有一个选项元素，则如果缺少选择元素的多属性，则选择元素的显示大小为1，如果选择元素的选项列表中没有选项元素的selectedness设置为true，则用户代理必须按未禁用（如果有）的树状顺序将选项列表中第一个选项元素的selectedness设置为true

通过设置其

innerHTML

或

textContent

属性更改选项会触发此重置（Firefox上除外），但

text

属性（仅限

属性）不会触发此重置（IE上除外）

尽管这个答案解决了这个问题，但更有趣的是，为什么选项html的更改会影响select的SelectedIndex？如果是这样，不应该

$（'#three'）。触发器（'change'）

与

$（'#三'）.html（“moo”）具有相同的效果对于selecetedIndex？Vijay，我同意。Chrome开发工具也没有列出该事件！我能想到的最好的情况是，这是一个重新油漆的问题。更改选项的文本时，将导致选择重新绘制。在重新绘制中，存在一个问题，即道具被重置为默认值。$（“#三”）[0]。text=“moo”
不会重置索引，但textContent
会重置。@dandavis，$（'#three'）[0]。text=“moo”
在IE中不起作用（至少在IE11中是这样），只是不要在
元素上使用.html（）
！只能包含文本
，不能包含任意html。尝试使用.text（）。
var i = 0;
$(".drpmnu").change(function (e) {
    i++;
    $('#three').html("data" + i);
})

// 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";

$("#three").html("moo");
$(".drpmnu").prop("selectedIndex", -1);