jquery UI.js可以阻止加載動態加載的選擇菜單

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/

$(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 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>

這似乎很好地工作，雖然我不得不刪除PHP，自然，只是使用一些模擬位置