正在更新';选择'<;选项>;的<;选择>;基于所选择的<;选项>;另一<;选择


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

我有一个带有动态创建的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>'; 

这样可以很好地工作,并且可以按原样创建选择框。沿着表格,我生成了另一个选择,如下所示;

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_loulord"选项中选择一个房东时。"landord_pets"选择的"selected"选项应根据"landlords"表中"landord_prets"字段中存储的值进行更改。

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

提前谢谢,迈克尔。

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

名为"landord_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>';