set selected option on Form Modal Bootstrap with AJAX Chained Dropdown

Question

I have problem with chained dropdown on bootstrap modal,

Here's my code :

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>

My goal is : when user click edit button lets pretend boostrap modal popped up, then users can see the selected option based on AJAX result from backend data

In this case Select1 selected value should be "B", and Select 2 selected value should be "B3"

I have tried these following helps but still failed to get what i want

link1 , link2 , link3 , link3

but still the #select2 won't get selected

Answer 1

After hours of debugging, found out that the response need to bo stored into a var here's the solution that works :

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>