I successfully create new select if the button is click. but how do i stop the selected being refresh whenever I add another select?
it's kind hard for me to explain but here's the code:
<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>
`;
}
}
You should not alter innerHTMl, instead, 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>