Как я могу добавить строку через поле выбора в datatable?

Question

Я добавляю строку в мои таблицы данных, выбирая опцию из моего окна выбора:

 <select class="item-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

 $(document).on('change', '.item-select', function() {
    var optionValue = $(this).val();
    var optionText = $('.item-select option[value="'+optionValue+'"]').text();
    table.row.add({
      "id":     optionValue,
      "name":   optionText,
    }).draw();

  });

Работает хорошо, но я хочу иметь возможность добавить эту же опцию напрямую еще раз. Это означает, например: я добавляю Volvo, затем добавляю Saab, но когда я хочу добавить еще один Saab, он не работает. Я должен добавить что-то еще, например VW, и тогда я смогу добавить Saab.

Answer 1

Добавить пустое значение и сбросить выбор, который не вызовет событие change.

$(document).on('change', '.item-select', function() {
    var optionValue = $(this).val();
    var optionText = $('.item-select option[value="'+optionValue+'"]').text();
    if (optionValue) {
      //  table.row.add({
      //    "id":     optionValue,
      //    "name":   optionText,
      //  }).draw();
      $('option', this).first().prop('selected', true)
      console.log(`${optionText} added`)
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="item-select">
  <option>Select make...</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>