<div class="container">
<select class="btn" name="item">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
<option>Theta</option>
</select>
<input type="text" class="desc" name="desc">
</div>
In this example, element selected by default in the "select" dropdown is "Alpha". I want to clone the complete node with values. If i select a different value in the dropdown and enter some text in the input box, and then clone the node, only the text box value is cloned. The value of "select" dropdown in the new object remains the default (Alpha).
Why is the behavior of cloning different for "select" vs "input"?
var parent = document.querySelector(".container");
var button = parent.querySelector(".btn");
var textbox = parent.querySelector(".desc");
> textbox.value
< "some random text"
> button.value
< "Gamma"
var cloned = parent.cloneNode(true);
var childButton = cloned.querySelector(".btn");
var childTextbox = cloned.querySelector(".desc");
> childTextbox.value
< "some random text"
> childButton.value
< "Alpha"
See Question&Answers more detail:os