使用 jQuery 和 AJAX 根据另一个 <select> 的选定 <option> 更新 <select> 的“选定” <option>

Question

我有一个带有动态创建选择的表单；

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>'; 

这可以正常工作并按应有的方式创建选择框。进一步沿着表格，我生成了另一个选择，如下所示；

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>'; 

同样，这工作正常，并按应有的方式创建了选择框。

我需要做的是当用户从“property_landlord”选择中选择房东时。 'landlord_pets' 选择的 'selected' 选项应根据 'landlords' 表中 'landlord_pets' 字段中存储的值进行更改。

我花了几个小时搜索这个，我假设我需要使用 jQuery 和 AJAX，但我对 AJAX 的了解有限，我真的很难解决这个问题。

提前致谢，迈克尔。

Answer 1

我最终设法弄清楚了这一点，并认为我会发布我的解决方案，以防将来它可以使其他任何人受益。这可能不是最有效的方法，但它有效！您会看到我的代码被设计为影响很多选择/输入，如果您只需要针对一个输入/选择，我的代码会更短。

名为“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（名为 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（名为 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>';