How to add a <select> <option> with jquery dynamically?

Question

Changed value of <select> on success response from API with:

jQuery('#vat').val(response);

With this returned value can be placed into a textbox , but need to change the selected value of a combobox .

How to realize this?

Here is jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
  function getVat() { // Do an Ajax request to retrieve the product price 
    console.log("getVat before ajax", jQuery('#product_name').val());
    jQuery.ajax({ 
      url: './get/vat/get1.php', 
      method: 'POST', 
      data: {'id' : jQuery('#product_name').val()},
      success: function(response){ 
        console.log("getPrice after ajax", jQuery('#product_name').val());
        jQuery('#vat').val(response);
      }, 
      error: function (request, status, error) { 
        alert(request.responseText); 
      }, 
    });                 
  } 
</script>

The script works when #vat is a textbox but not when #vat is a combobox .

Update: Here is the script been using for the combobox:

<?php
  $dbname = 'db';
  $dbuser = 'root';
  $dbpass = 'pass';

  $db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
  if (!$db) {
    exit('Connect Error (' . mysqli_connect_errno() . ') '
    . mysqli_connect_error());
  } 
?>

<select style="width:100%" id="vat" name="vat">
  <option value = "0">No VAT</option>
  <?php
    $queryusers = "SELECT id, internal_id, name FROM vat";
    $db = mysqli_query($db, $queryusers);
    while ( $d=mysqli_fetch_assoc($db)) {
      echo "<option value='".$d['id']."'>".$d['internal_id']." | ".$d['name']."</option>";
    }
  ?>
</select>

Update 2:

The selected value is changed to '1'. But the script still shows <option value = "0">No VAT</option> . Does someone know how I can update the data that is shown.

Update 3:

I just get a extra option when I run the following script. The value that is represented as the selected value is still the same:

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script> 
            function getVat() { // Do an Ajax request to retrieve the product price 
            console.log("getVat before ajax", jQuery('#product_name').val());
            jQuery.ajax({ 
                url: './get/vat/get1.php', 
                method: 'POST', 
                data: {'id' : jQuery('#product_name').val()},
                success: function(response){ 
            // and put the price in text field 
                    var newOption = "<option value=" + response + ">" + response + "</option>";

                    $("#vat").append(newOption);
                    $("#vat").val(response);

                    getPrice();
                    }, 
                error: function (request, status, error) { 
                    alert(request.responseText); 
                    }, 
                });                 
            } 
          </script>

Answer 1

You are right <select> value will be changed with $("#vat").val(1) . However this will not create a new <option> . If there would be an <option value="1"> then this option would have been shown. Since it doesn't exist thus HTML have nothing to show and showing default <option> of <select> .

You need to create a <option> and append it to <select> .

Here's jQuery on success:

var newOption = `<option value=` + response + `>` + response + `</option>`;

$("#vat").append(newOption);
$("#vat").val(response);