Creo con éxito una nueva selección si se hace clic en el botón. pero, ¿cómo dejo de actualizar la selección cada vez que agrego otra selección?
Es un poco difícil para mí explicarlo, pero aquí está el código:
<body> <table> <tr> <td class="here" colspan="2"> </td> </tr> <tr> <td colspan="2" ><a style="color: #4F7942; cursor: pointer;" onclick="add()">Add Select</a></td> </tr> </table> function add(){ var container = document.querySelector(".here"); if(container){ container.innerHTML += ` <table> <tr> <td> <select class="abc" name="any[]"> <option value="" selected disabled>Select....</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> </tr> </table> `; }}
No debe alterar innerHTMl , en su lugar, use container.insertAdjacentHTML
function add(){ var container = document.querySelector(".here"); if(container){ container.insertAdjacentHTML('beforeend', ` <table> <tr> <td> <select class="abc" name="any[]"> <option value="" selected disabled>Select....</option> <option>1</option> <option>2</option> <option>3</option> </td> </tr> </table> `); } } <table> <tr> <td class="here" colspan="2"> </td> </tr> <tr> <td colspan="2" ><a style="color: #4F7942; cursor: pointer;" onclick="add()">Add Select</a></td> </tr> </table>