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

我尝试使用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);
?>

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