Question

我尝试使用Ajax / PHP为我的页面加载动态加载的选择菜单。但是jquery UI插件阻止加载动态加载的数据。所以当我改变第一个选择菜单时，我什么都看不到。

我的代码就像这样。

<script>
$(document).ready(function($) {
  var list_target_id = 'list-target'; //first select list ID
  var list_select_id = 'list-select'; //second select list ID
  var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select

  $('#'+list_target_id).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
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'loadcity.php?svalue='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});
</script>

<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<?php
$sel_dis2 = mysql_query("SELECT * FROM district", $connection);
confirm_query($sel_dis2);
while($dis2 = mysql_fetch_assoc($sel_dis2)){
?>
<option value="<?php echo $dis2["id_district"]; ?>"><?php echo $dis2["district"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="select-state">
<label>City</label> 
<select name="list-target" id="list-target"></select>
</div>
</form>

我在不包含jquery UI的情况下测试了代码并且它正常工作。但我想为此页面添加jquery UI。这是php文件

<?php
$connection = mysqli_connect("localhost", "user", "password", "database");

$selectvalue = mysqli_real_escape_string($connection, $_GET['svalue']);

mysqli_select_db($connection, "database");
$result = mysqli_query($connection, "SELECT city.id_city, city.city  FROM city WHERE city.district_id = '$selectvalue'");

echo '<option value="">-Select-</option>';
while($row = mysqli_fetch_array($result))
  {
    echo '<option value="'.$row['id_city'].'">' . $row['city'] . "</option>";
    //echo $row['drink_type'] ."<br/>";
  }

mysqli_free_result($result);
mysqli_close($connection);

?>

Answer 1

其他东西正在破坏你的选择。在jsfiddle测试：https://jsfiddle.net/ddpdhr5a/

＆＃13;

$(document).ready(function($) {
  var list_target_id = 'list-target'; //first select list ID
  var list_select_id = 'list-select'; //second select list ID
  var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select

  $('#'+list_target_id).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
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'loadcity.php?svalue='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<option value="something">Something</option>
</select>
</div>
<div class="select-state">
<label>City</label> 
<select name="list-target" id="list-target"></select>
</div>
</form>

＆＃13;

这似乎工作得很好，虽然我不得不删除PHP，当然，只是使用一些模拟位置

jquery UI.js阻止加载动态加载的选择菜单

1 个答案: