javascript - 设置 AJAX 调用并填充下拉列表

Question

所以这里我有两个下拉菜单:

<select id="CountryId">
<option value="16">UK</option>
<option value="17">Germany</option>
<option value="18">Italy</option>
<option value="19">Spain</option>
</select>


<select id="CityId"> </select>

在应用程序中，我有一个 php 函数，它按国家/地区 ID 返回城市列表:

{"63":"Rome","65":"Palermo","72":"Torino","73":"Milan"}

我试图实现的是第一个下拉列表的 onChange，以获取国家/地区的 ID 并使用返回的城市填充第二个列表。

我尝试通过此 AJAX 调用来实现它，并尝试对其进行调试，但似乎没有任何效果。正在获取 var data，但没有其他任何反应。这是片段:

$('#CountryId').change(function(){
     var data = $('#EventCustomerId option:selected').val();

     $.ajax({
         type:'POST',
         async: true,
         cache: false,
         url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
         success: function(response) {
             jQuery('#CityId').html(response);
         },
         data: data
     });
     return false;
})

我对用响应填充第二个下拉列表的方式不太确定。响应以 JSON 格式的纯 HTML 返回。

非常感谢任何帮助。

Answer 1

您是否尝试过将 async 设置为 false？

    $('#CountryId').change(function(){
         var data = $('#EventCustomerId option:selected').val();
         $.ajax({
             type:'POST',
             async: false,
             cache: false,
             url: <?php echo  Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
             success: function(response) {
                 jQuery('#CityId').html(response);
             },
             data: data
         });
    });

如果现在可以通话，您可以在此处发布您的回复吗