0

我遇到的问题：

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

问题：我的第一个选择列表的选定选项索引 = 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>
4

3 回答 3

0

option 元素通过 javascript 属性维护其当前选定状态selected（不要与 selected 属性混淆，它对应于默认选定状态）。

这不是克隆的 - 因此您必须手动更新选择

注意 - 你不能id在单个文档上有重复的 s - 当你克隆你的元素时，你正在重复ids

于 2012-04-13T13:47:31.977 回答
0

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

function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);
div.style.display='block';
document.getElementById('rules').appendChild(div);
return false;
}
于 2012-04-13T13:54:32.683 回答
0

在某些浏览器（Firefox、Chrome..）中，DOM 对象不会更新（文本输入及其值和选定选项具有“选择”属性），因此当您调用 innerHTML 时，您会得到没有值的原始结构。

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

于 2012-04-13T14:01:43.517 回答