Return javascript output for option select

Question

I'm working on these codes for awhile and need some help. Basically, I'm trying to get the result or output of the script and put it in between the option select as shown here:

<select class="form-control" name="property_list">
  *insert output javascript here               
</select>

Below is the complete script. Would this method be possible?

<script>
    $(document).ready(function(){
    $("#client-list").on('change', function postinput(){
        var matchvalue = $(this).val(); // this.value
        $.ajax({ 
            url: 'sql/client-to-property.php',
            data: { matchvalue: matchvalue },
            type: 'post'
        }).done(function(responseData) {
            console.log('Done: ', responseData);
        }).fail(function() {
            console.log('Failed');
        });
    });
  }); 
</script>

<div class="input-group mb-3">
  <span class="input-group-addon gi data-gi-size gi-user-add"></span>
  <select id="client-list" name="client-list">
     <?php
       $sql = "SELECT `id`, `email`
               FROM `clients` ORDER BY `id` ASC";
       $result = $DB_CON_C->query($sql);

       if($result !== false) {
         $data_row = '<option>New Client</option>' . "\n";
         foreach($result as $row) {
           $data_row .=  '<option>' .$row['email'] . '</option>' . "\n";
         }
      }
      unset($row);
      echo $data_row;
    ?>
  </select>
</div>

<select class="form-control" name="property_list">
  *insert output javascript here               
</select>

Answer 1

Loop through your response data and append options to your property list like so:

  $(document).ready(function(){
      $("#client-list").on('change', function postinput(){
        var matchvalue = $(this).val(); // this.value
        $.ajax({ 
          url: 'sql/client-to-property.php',
          data: { matchvalue: matchvalue },
          type: 'post'
        }).done(function(responseData) {
          console.log('Done: ', responseData);

          var data = JSON.parse(responseData); // Assuming response data is a JSON string
          data.each(function(i, property) {
            $("input[name=property_list]").append("<option />").text(property);
          });
        }).fail(function() {
          console.log('Failed');
        });
      });
    }); 

The options will need values as well so you can add that attribute to the options too:

$("input[name=property_list]").append("<option />").attr('value', property).text(property);

Answer 2

Use .html() to add returned data to the select , in your done function get select by name and add the data. This will work if the returned data is in the following format:

<option value="1">1</option>
<option value="2">2</option>

jQuery

$(document).ready(function () {
    $("#client-list").on('change', function postinput(){
        var matchvalue = $(this).val(); // this.value
        $.ajax({
            url: 'sql/client-to-property.php',
            data: { matchvalue: matchvalue },
            type: 'post'
        }).done(function(responseData) {
            console.log(responseData);
            var data = JSON.parse(responseData);
            $('select[name="property_list"]').html(data);
        }).fail(function() {
            console.log('Failed');
        });
    });
});