設置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
         });
    });

如果現在可以通話，您可以在此處發布回復嗎