Updating the 'selected' <option> of a <select> based on the selected <option> of another <select> using jQuery and AJAX

Question

I have a form with a dynamically created select;

echo '<select id="property_landlord" name="property_landlord" class="chosen-select">'; 
echo '<option value="">Please Select</option>';

$property_landlord_query = mysqli_query($con, "SELECT * FROM landlord order by landlord_surname ASC"); 
while ($row = mysqli_fetch_array($property_landlord_query)) { 

echo '<option value="' . $row['landlord_id'] . '">' . $row['landlord_first_name'] . ' ' . $row['landlord_surname'] . '</option>';

} 

echo '</select>'; 

This works fine and creates the select box as it should. Further along the form I have another select generated as follows;

echo '<select id="property_letting_pets" name="property_letting_pets">'; 
echo '<option value="">Please Select</option>';

$status_yes_no_query = mysqli_query($con, "SELECT * FROM status_yes_no order by status_yes_no_name ASC"); 
while ($row = mysqli_fetch_array($status_yes_no_query)) {

echo '<option value="' . $row['status_yes_no_id'] . '">' . $row['status_yes_no_name'] . '</option>';

} 

echo '</select>'; 

Again, this works fine and created the select box as it should.

What I need to be able to do is when a user selects a landlord from the 'property_landlord' select. The 'selected' option of the 'landlord_pets' select should change based on the value stored in the 'landlord_pets' fields in the 'landlords' table.

I've spent hours searching this and I'm assuming I'll need to use jQuery and AJAX but my knowledge of AJAX is limited and I'm really struggling to work this out.

Thanks in advance, Michael.

Answer 1

I managed to figure this out in the end and thought I'd post my solution in case it can benefit anyone else in the future. It may not be the most efficient way but it works! You'll see that my code has been designed to affect a lot of selects/inputs and is much shorter if you only need to target one input/select.

File called 'landlord_defaults.php';

<?php

require_once('../inc/config.php');

$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);

$landlord_id = mysqli_real_escape_string($con, $_GET['landlord_id']);
$request = mysqli_real_escape_string($con, $_GET['request']);

$landlord_defaults_query = mysqli_query($con, "SELECT landlord_pets, landlord_smoking, landlord_lha, landlord_sharers, landlord_tenant_find_fee, landlord_management_fee, landlord_tenant_find_fee_type, landlord_management_fee_type FROM landlord WHERE landlord_id = '" . $landlord_id . "'") or die(mysql_error());
$landlord_defaults = mysqli_fetch_array( $landlord_defaults_query );

$status_yes_no_query = mysqli_query($con, "SELECT * FROM status_yes_no order by status_yes_no_name ASC"); 

$fee_type_query = mysqli_query($con, "SELECT * FROM fee_type order by fee_type_name ASC"); 

if ($request == 'pets') {

while ($row = mysqli_fetch_array($status_yes_no_query)) {

if ($row['status_yes_no_id'] == $landlord_defaults['landlord_pets']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['status_yes_no_id'] . '"' . $selected . '>' . $row['status_yes_no_name'] . '</option>';

} 
} else if ($request == 'smoking') {

while ($row = mysqli_fetch_array($status_yes_no_query)) {

if ($row['status_yes_no_id'] == $landlord_defaults['landlord_smoking']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['status_yes_no_id'] . '"' . $selected . '>' . $row['status_yes_no_name'] . '</option>';

} 
} else if ($request == 'lha') {

while ($row = mysqli_fetch_array($status_yes_no_query)) {

if ($row['status_yes_no_id'] == $landlord_defaults['landlord_lha']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['status_yes_no_id'] . '"' . $selected . '>' . $row['status_yes_no_name'] . '</option>';

} 
} else if ($request == 'share') {

while ($row = mysqli_fetch_array($status_yes_no_query)) {

if ($row['status_yes_no_id'] == $landlord_defaults['landlord_sharers']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['status_yes_no_id'] . '"' . $selected . '>' . $row['status_yes_no_name'] . '</option>';

} 
} else if ($request == 'tenant_find_fee') {

echo $landlord_defaults['landlord_tenant_find_fee'];

} else if ($request == 'management_fee') {

echo $landlord_defaults['landlord_management_fee'];

} else if ($request == 'tenant_find_fee_type') {

while ($row = mysqli_fetch_array($fee_type_query)) { 

if ($row['fee_type_id'] == $landlord_defaults['landlord_tenant_find_fee_type']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['fee_type_id'] . '"' . $selected . '>' . $row['fee_type_name'] . '</option>';

} 
} else if ($request == 'management_fee_type') {

while ($row = mysqli_fetch_array($fee_type_query)) {

if ($row['fee_type_id'] == $landlord_defaults['landlord_management_fee_type']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $row['fee_type_id'] . '"' . $selected . '>' . $row['fee_type_name'] . '</option>';

} 
}

mysqli_close($con);

?>

jQuery (file called add_property.php);

// set landlord defaults
var list_select_id = 'property_landlord';
var initial_target_html = '<option value="">Please Select a Landlord First</option>'; //Initial prompt for target select

  $('#property_letting_lha').html(initial_target_html); //Give the target select the prompt option
  $('#property_letting_pets').html(initial_target_html); //Give the target select the prompt option
  $('#property_letting_smoking').html(initial_target_html); //Give the target select the prompt option
  $('#property_letting_sharers').html(initial_target_html); //Give the target select the prompt option
  $('#property_tenant_find_fee_type').html(initial_target_html); //Give the target select the prompt option
  $('#property_management_fee_type').html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
    //Grab the chosen value on first select list change
    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    $('#property_letting_pets').html('<option value="">Loading...</option>');
    $('#property_letting_smoking').html('<option value="">Loading...</option>');
    $('#property_letting_lha').html('<option value="">Loading...</option>');
    $('#property_letting_sharers').html('<option value="">Loading...</option>');
    $('#property_tenant_find_fee_type').html('<option value="">Loading...</option>');
    $('#property_management_fee_type').html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#property_letting_pets').html(initial_target_html);
       $('#property_letting_smoking').html(initial_target_html);
       $('#property_letting_lha').html(initial_target_html);
       $('#property_letting_sharers').html(initial_target_html);
       $('#property_tenant_find_fee_type').html(initial_target_html);
       $('#property_management_fee_type').html(initial_target_html);
       $('#property_tenant_find_fee').val('');
       $('#property_management_fee').val('');
    } else {

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=pets',
             success: function(output) {
                //alert(output);
                $('#property_letting_pets').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=smoking',
             success: function(output) {
                //alert(output);
                $('#property_letting_smoking').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=lha',
             success: function(output) {
                //alert(output);
                $('#property_letting_lha').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=share',
             success: function(output) {
                //alert(output);
                $('#property_letting_sharers').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=tenant_find_fee',
             success: function(output) {
                //alert(output);
                $('#property_tenant_find_fee').val(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=management_fee',
             success: function(output) {
                //alert(output);
                $('#property_management_fee').val(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=tenant_find_fee_type',
             success: function(output) {
                //alert(output);
                $('#property_tenant_find_fee_type').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

      //Make AJAX request, using the selected value as the GET
      $.ajax({url: '../ajax/landlord_defaults.php?landlord_id='+selectvalue+'&request=management_fee_type',
             success: function(output) {
                //alert(output);
                $('#property_management_fee_type').html(output);
            },

          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});

        }

HTML (file called add_property.php);

echo '<tr>
    <td><label for="property_letting_pets" class="rightmove">Pets Allowed:</label></td>
    <td>';

echo '<select id="property_letting_pets" name="property_letting_pets" required>';
echo '</select>&nbsp;<a href="#" title="The landlord\'s default answer has been selected." class="tooltip"><span title="Help"><img src="' . SITE_IMG . 'tooltip_icon.png" height="14" width="14" alt="Help"></span></a>'; 
echo '</td></tr>';