Appending a row to a Bootstrap table alters previous rows

Question

I'm using bootstrap-table where one of the columns is a drop-down menu:

<table data-toggle="table" id="table" data-unique-id="id">
  <thead>
    <tr>
      <th data-field="type">type</th>
      <th data-field="id">id</th>
    </tr>
  </thead>
  <tbody>
 </tbody>
</table>

However, when appending a new row using:

$('#table').bootstrapTable('append', {
    id: newId,
    type: '<select name="type" class="select-type"><option value="foo">foo</option><option value="bar">bar</option></select>'
  })

The option selected in previous rows isn't saved.

Demo

Update: The method in my answer works well for small tables, but using it in tables of 100+ rows is awfully slow, so I'm still looking for a solution.

Answer 1

I've added an event listener that uses bootstrap-table's api to update values after the option is selected.

$('#table').on('change', '.select-type', function(eventt) {
    const elem = eventt.target;
    elem[elem.selectedIndex].setAttribute('selected', true);
    const tr = elem.parentNode.parentNode;
    const rowId = tr.getAttribute("data-uniqueId");
    const row = $('#table').bootstrapTable('getRowByUniqueId', rowId);
    row['type'] = elem.outerHTML;
    $('#table').bootstrapTable('updateByUniqueId', [{id: rowId, row: row}]);
});