I understand that when you change a selection, the state of the selection is stored in browser and the cloned node will never include the state of object/ element which is changed and/or stored by browser. But for input, it is stored as a value of the attribute value and get cloned. When I am having trouble with is how do I clone the selected value. I seen other solutions that really complex I am just trying to get the select value and log it into the console. No append into the body, no crazy cloning with lots of divs. Just getting the selected value and logging it.
document.getElementById("buttonTest").addEventListener("click", cloneIt);
function cloneIt() {
const origSelect = document.querySelector("select");
console.log(JSON.stringify(origSelect));
var e = document.getElementById("OBJ_TYPE");
console.log(e.options[e.selectedIndex].text);
let cloneThis = document.getElementById("cloneThis");
let clonedNode = cloneThis.cloneNode(true);
clonedNode.querySelector("select").value = origSelect.value;
}
cloneIt();
<button id="buttonTest" title="Test" style="visibility: visible; background-color: #f6f6f6; font-weight: bold;"><i class="fa fa-refresh"></i>
Test</button>
<div id="cloneThis">
<td class="componentellipsis" id="recordTypeWrapper">
<select id="OBJ_TYPE" class="newstepselect">
<option value="TP">TP</option>
<option value="Workflow">Workflow</option>
<option value="Package">Package</option>
</select>
</td>
</div>