12 html javascript jquery dom
使用jQuery改变时.html()的<option>内部<select>(我以前设置selectedIndex属性-1)重置selectedIndex的财产<select>从" -1"到'0 "
<!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>
HTML5规范中提到了这种情况:
在设置时,
selectedIndex属性必须将选项列表中所有选项元素的选择性设置为false,然后索引为给定新值的选项列表中的选项元素(如果有)必须将其选择性设置为true它的肮脏设定为真.注意:即使在select元素没有多个属性且显示大小为1的情况下,这也可能导致没有元素的选择性设置为true.
...
如果插入节点或删除节点导致选项列表获得或丢失一个或多个选项元素,或者如果选项列表中的选项元素要求重置,则如果select元素的multiple属性不存在,则select元素的显示大小为1,并且select元素的选项列表中的选项元素的选择性设置为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>的selected属性设置为false(但应触发复位太).
简而言之,所有当前浏览器都无法完全实现规范,因此唯一的跨平台解决方法是更改selectedIndex为select(及其后代元素)上的最后一个操作:
$("#three").html("moo");
$(".drpmnu").prop("selectedIndex", -1);
| 归档时间： |
|
| 查看次数： |
438 次 |
| 最近记录： |