更新&#39;已选中&#39; <select>的<option>基于使用jQuery和AJAX的另一个</option> </select>的选定<option> </option>

时间:2015-02-22 17:38:43

标签: php jquery ajax select mysqli

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

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的了解有限,而且我真的很难解决这个问题。

先谢谢,迈克尔。

1 个答案:

答案 0 :(得分:0)

我最终设法解决了这个问题,并认为我会发布我的解决方案,以防将来可以使其他人受益。它可能不是最有效的方式,但它的工作原理!你会看到我的代码被设计为影响很多选择/输入,如果你只需要定位一个输入/选择,它就会短得多。

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