stop resetting select input whenever new select option is added when button is click

Question

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>
    `;
}

}

https://jsfiddle.net/idfrnffnd/akjpLc2y/4/

There's nothing *always* wrong with adding content, but in this case your code completely rebuilds the contents of that element, so *all* the ` — Pointy, Jan 11 '22 at 15:08
Seems very odd you are adding an entire table to insert a new row into a table cell. Why are you not adding the row to an existing table? — epascarello, Jan 11 '22 at 15:12
@epascarello back in the day, adding a single row to a `` in IE required one to add a new `` to the `
`, with that new row inside. I don't know whether that's still the case, but the old IE engine had a really bizarre architecture for tables. — Pointy, Jan 11 '22 at 16:10
@epascarello that's just an example of mine. the real one is kinda long and have other elements inside the table separately — Drape Tomania, Jan 11 '22 at 23:47

score 1 · Accepted Answer · answered Jan 11 '22 at 15:08

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>

stop resetting select input whenever new select option is added when button is click

1 Answers1