ein div Klonen setzt alle Elemente des Ziel div

Question

Das Problem ich habe ausgewählt meine erste select-lists ausgewählter Optionsindex = 0;
Dies sollte nicht passieren, aber ich kann nicht herausfinden, warum es es trotzdem macht. Kann mir jemand sagen, was ich falsch gemacht habe?

<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

Der Grund Es ist, dass Sie die innereHTML setzen, was bedeutet, dass die ganze Sache repariert wird. Sie müssen das Element stattdessen an den Container anhängen. Probieren Sie es aus, es sollte die Position jedes einzelnen auswählen.

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

Answer 2

Die Option Element bleibt in dem aktuellen ausgewählten Zustand mit den selected JavaScript-Eigenschaft (nicht mit dem ausgewählten Attribute verwechselt werden, der ausgewählten Zustand auf Standard entspricht).

Dieses ist nicht geklont - so können Sie die Auswahl manuell

Hinweis aktualisieren würde - Sie keine doppelten id s auf einem einzigen Dokument haben kann - wenn Sie Sie Element klonen duplizieren Sie id s

Answer 3

In einigen Browsern (Firefox, Chrome ..) das DOM-Objekt wird nicht aktualisiert (die Texteingabe mit seinem Wert und die gewählten Option mit dem „select“ Attribute), also wenn Sie innerHTML- rufen Sie das bekommen ursprüngliche Struktur ohne Werte.

Sie haben die DOM-Update des Objekts zu erzwingen, wie folgt aus: http://dev-answers.blogspot.it/2007/08/firefox-does-not-reflect-input-form.html