为州和城市选择列表选择的JQuery仅有效一次

Question

我正在做一个州和城市的选择框。一旦用户选择了该州，它将根据所选的州显示该州中的整个城市列表。以下是javascript代码：

$(document).ready(function() {

    $("#origin_state").chosen();

    $("#origin_state").change(function() {
        $("#origin_city").load("getCities.php?state=" + $("#dest_state").val()).prop('disabled', false);
    });

     $("#origin_city").hover(function() {

        $("#origin_city").chosen();
    }); 
});

我有一个州和城市的数据库。getCities.php将根据您选择的州获取城市列表。问题是它只起作用一次。一旦我将州更改为另一个州，城市列表就不会改变，如果我注释掉$("#origin_city").chosen();，它就可以正常工作。请帮帮我！

Answer 1

好吧，你的代码缺少选择的插件更新功能，因为当你在下拉菜单上应用选择的初始化函数chosen()时，它们呈现为选择的下拉列表，然后如果你想用新的数据刷新它，那么你必须触发选择的自定义事件' chosen :updated‘。按照下面的方法完成州-市程序。

首先，在两个下拉菜单上应用所选择的插件，方法是将类设置为‘select select’。

<select id="origin_state" class="chosen-select"></select>
<select id="origin_city" class="chosen-select"></select>

然后是你的javascript代码：

$('.chosen-select').chosen();

$('#origin_state').change(function(){
    var state = $(this).val();
    $("#origin_city").load("getCities.php?state="+state).prop('disabled',false);
    $('#origin_city').trigger('chosen:updated');
});