установить выбранную опцию в модальной форме Bootstrap с помощью AJAX Chained Dropdown

Question

У меня проблема с цепным выпадающим меню на bootstrap модальный,

Вот мой код:

function edit(id) {
  var id = id;
  $('#edit').prop('hidden', true);
  $('#modal_form').prop('hidden', false);

  /* $.ajax ({
  	    type: 'POST',
  	    data: {id : id},
  	    url: 'http://localhost/master',
  	    success: function(response) { */

  response = {
    id: 1,
    select1: 'B',
    select2: 'B3'
  };

  $('#select1').val(response.select1);
  getSelect2(response.select1);
  $('#select2').val(response.select2);




}

function getSelect2(select1) {
  var select1 = select1;
  /* 	$.ajax ({
  	    type: 'POST',
  	    data: {select1 : select1},
  	    url: 'http://localhost/master',
  	    success: function(response) { */

  response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'

  $('#select2').html(response);
  /* }
  }); */

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>

<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">

<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>

</div>

Моя цель заключается в следующем: когда пользователь нажимает кнопку «Редактировать», он притворяется, что всплывающее окно модратора Booraprap, тогда пользователи могут видеть выбранную опцию на основе AJAX результата из данных бэкэнда.

В этом случае выбранное значение Select1 должно быть «B», а выбранное значение Select 2 должно быть «B3»

Я пробовал следующие подсказки, но все еще не смог получить то, что я хочу

link1 , link2 , link3 , link3

, но все равно # select2 не будет получен выбран

Answer 1

После нескольких часов отладки обнаружил, что ответ должен храниться в var . Вот решение, которое работает:

function edit(id) {
  var id = id;
  $('#edit').prop('hidden', true);
  $('#modal_form').prop('hidden', false);

  /* $.ajax ({
  	    type: 'POST',
  	    data: {id : id},
  	    url: 'http://localhost/master',
  	    success: function(response) { */

  response = {
    id: 1,
    select1: 'B',
    select2: 'B3'
  };

  $('#select1').val(response.select1);
  getSelect2(response.select1);
  $('#select2').val(response.select2);




}

function getSelect2(select1) {
  var select1 = select1;
  /* 	$.ajax ({
  	    type: 'POST',
  	    data: {select1 : select1},
  	    url: 'http://localhost/master',
  	    success: function(response) { */

  var response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'

  $('#select2').html(response);
  /* }
  }); */

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>

<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">

<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>

</div>