Предварительно выберите значение <select>, data-src

Question

Я построил таблицу DataTable с кнопкой редактирования, которая открывает модальное окно bootstrap для редактирования записи. Я использовал ответ Евгения Горбункова здесь: Редактировать исходные данные DataTables, используя форму во всплывающем окне Кстати, если вам случится прочитать эту ветку, спасибо за это решение!

Я могу получить входные данные и текстовые области для предварительного заполнения данными, но я наткнулся на выбор значений. Я вижу, что он выбирает правильное значение, но он не отображается, как выбранный, когда я открываю форму. (https://www.upload.ee/image/11198680/probleem.PNG). Обратите внимание на небольшую галочку справа.

Я думаю, что проблема в том, что мои опции выбора не имеют выбранного значения, но я не знаю, как его добавить? Может кто-нибудь помочь мне или указать путь к решению?

Мой выбранный тег:

<select class="form-control kt-selectpicker" data-live-search="true" id="VaruosaSeotudBIDMuuda" name="VaruosaSeotudBIDMuuda" style="width: 100%;" data-src="VaruosaSeotudBID">
<option></option>
<?php 
include ("config.php");
$sql = mysqli_query($con, "SELECT varuosad.VaruosaID, varuosad.VaruosaNimetus, varuosad.VaruosaKood from varuosad");
while ($row = $sql->fetch_assoc()){
echo "<option value=" . $row['VaruosaID'] . ">" . $row['VaruosaNimetus'] . ' / '. $row['VaruosaKood'] . "</option>";
}
?>


</select>

Получение информации о строке из данных

                        //edit row handler
        table.on('click', '.edit', function(){
    //get clicked row
    const rowClicked = table.row($(this).closest('tr'));
    //populate edit form with row data by corresponding 
    //rowClicked property based on 'data-src' attribute
     $.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
      $(this).val(rowClicked.data()[$(this).attr('data-src')]);

    });
    //$('#VaruosaSeotudBIDMuuda').val('3');

    //set modal attribute rowindex to corresponding row index
    $('#MuudaSeotudToodeForm').attr('rowindex', rowClicked.index());
    //open up edit form modal
    $('#SeotudToodeMuudaModal').modal('toggle');
  });




         //submit edits handler
  $('#SeotudToodeMuudaModal').on('click', '#MuudaSeotudToodeBTN', function(){
    //grab modified data into object
    const modifiedData = {};
    $.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
      Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});

    });
    //send modified data to the backend
    $.ajax({
      url: 'pages/varuosakataloog/varuosakataloogMuudaSeotudToode.php',
      method: 'POST',
      data: {id: $('#MuudaSeotudToodeForm').attr('rowindex'), ...modifiedData},
      success: () => {
        //close the modal
        $('#SeotudToodeMuudaModal').modal('hide');
        //re-draw datatable
        table.ajax.reload();
      }
    });
});

Answer 1

Я решил свою проблему. Получите помощь здесь.

bootstrap - выберите ничего не выбранное

Добавление этой проблемы решило мою проблему:

$('#VaruosaSeotudBIDMuuda').selectpicker('refresh');

полный код, если любой новичок найдет его путь здесь:

//edit row handler
        table.on('click', '.edit', function(){
    //get clicked row
    const rowClicked = table.row($(this).closest('tr'));
    //populate edit form with row data by corresponding 
    //rowClicked property based on 'data-src' attribute
     $.each($('#MuudaSeotudToodeForm input,textarea,select'), function(){
      $(this).val(rowClicked.data()[$(this).attr('data-src')]);

    });
    $('#VaruosaSeotudBIDMuuda').selectpicker('refresh');

    //set modal attribute rowindex to corresponding row index
    $('#MuudaSeotudToodeForm').attr('rowindex', rowClicked.index());
    //open up edit form modal
    $('#SeotudToodeMuudaModal').modal('toggle');
  });