Question

我遇到的问题：

点击“添加”
我选择第二个选项
我点击“添加”

问题：我的第一个选择列表的选定选项索引= 0;
这不应该发生，但我无法弄清楚为什么它会这样做。谁能告诉我我做错了什么？

<script type="text/javascript">
function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);

document.getElementById('rules').innerHTML += div.innerHTML;
return false;
}

</script>
<div id="ruletemplate" style="display: none;">
<div >
    <label for="rule">Rule</label>
    <select name="rules[][option]">
        <option>MAX PERS</option>
        <option>MIN PERS</option>
    </select>
    <input name="rule[][amount]" type="text"/>
</div>
</div>
<form>
<div  id="rules" >

</div>
<a id="addRule" href="" onclick="javascript: add(); return false;">add</a>
<input type="Submit" value="Save"  />
</form>

Answer 1

option元素使用selected javascript属性维护其当前所选状态（不要与所选属性混淆，后者对应于默认选择状态）。

这不是克隆的 - 所以你必须手动更新选择

注意 - 您不能在单个文档上复制id - 当您克隆元素时，您正在复制id s

Answer 2

这样做的原因是你正在设置innerHTML，这意味着整个事情都被重新解析。您需要将元素追加到容器中。试试这个应该保持每个选择的位置。

function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);
div.style.display='block';
document.getElementById('rules').appendChild(div);
return false;
}

Answer 3

在某些浏览器（Firefox，Chrome ..）中，DOM对象不会更新（带有值的文本输入和带有＆＃34; select＆＃34;属性的选定选项），所以当你调用innerHTML时，你会得到没有价值观的原始结构。

您必须强制对象的DOM更新，如下所示：http://dev-answers.blogspot.it/2007/08/firefox-does-not-reflect-input-form.html

克隆div将重置目标div的所有选定项目

3 个答案: