克隆一個div復位所有選定的目標DIV

我點擊「添加」
我選擇第二個選項
我點擊「添加」

問題：我的第一個選擇列表選擇的選項索引= 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>

來源

2012-04-13 user1331696

不要放在標題解決 - 點擊小刻度，幫助回答下一個最... [查看這個鏈接] （http://meta.stackexchange.com/a/5235/170679） – ManseUK 2012-04-13 14:06:38

原因它是這樣做的，你是在設置innerHTML，這意味着整個事物被重新修復。您需要將元素追加到容器。試試這個應該保持每個選擇的位置。

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

來源

2012-04-13 13:54:32 qw3n

太棒了，！感謝您的幫助！ – user1331696 2012-04-13 13:59:44

不適用於我的Chrome - > http://jsfiddle.net/arvjV/ – ManseUK 2012-04-13 14:00:28

@ManseUK這很奇怪，因爲它保留了我在Chrome上的位置。 – qw3n 2012-04-13 14:04:19

選項元素保持與selected JavaScript屬性（不要與所選擇的屬性，其對應於默認選中狀態相混淆）其當前選擇狀態。

這個心不是克隆 - 所以你就必須更新選擇手動

注 - 你不能有一個單一的文件複製id秒 - 當你克隆您元素要複製id小號

來源

2012-04-13 13:47:31 ManseUK

該div的innerhtml沒有分配id，所以沒有重複的id。

\t \t Rule \t \t \t \t \t

– user1331696 2012-04-13 13:55:47

@ user1331696 ok - 剛剛從文檔中讀到 - >'cloneNode返回的重複節點在添加到另一個節點時收到一個新的uniqueID，您將不得不手動傳輸選定狀態 – ManseUK 2012-04-13 13:58:42

在某些瀏覽器（Firefox，Chrome瀏覽器..）DOM對象不更新（其值的文本輸入，並與「選擇」屬性所選擇的選項），所以當你打電話的innerHTML你得到的沒有價值的原始結構。

你必須強制對象的DOM更新，就像這樣：http://dev-answers.blogspot.it/2007/08/firefox-does-not-reflect-input-form.html

來源

2012-04-13 14:01:43 RedKnight91

克隆一個div復位所有選定的目標DIV

回答

相關問題