Javascript jQuery filter（）用于已加载数据的国家/州/城市列表（无ajax调用）

我正在创建一个包含三个下拉列表的表单，国家、州和城市

在选择一个国家时，应显示过滤后的州下拉列表，并基于州选择相应的城市

我工作的场景是，我不能进行任何ajax调用，因为所有国家、州、城市列表都是通过后端API调用加载到DOM中的。 因此，当页面加载时，将加载所有国家/州/城市列表

我尝试过的： 我已经使用jqueryfilter来过滤jquerychange事件上的select值

$(".country").on('change', function(event){
...
$('.state').html($('.state').find('option').filter('[value="' + this.value + '"]'));
...
}

类似地，我已经编写了一个状态下拉更改方法来过滤城市

HTML:

美国
澳大利亚
...

问题： 这是第一次完美地工作。但下一次当我再次尝试改变国家（从美国到澳大利亚）时，方法是搜索 在过滤后的美国各州中，并非所有的州列表都是在首次加载页面时加载的。所以下拉列表是空白的

有没有办法克服这个问题

提前谢谢

$('.state').html($('.state').find('option').filter('[value="' + this.value + '"]'));

正在覆盖您的状态列表，因此您丢失了最初显示的状态列表。。 有多种方法可以解决这个问题

您可以将状态列表保存在javascript变量中，并根据此变量将其过滤掉

var countryLookup={“美国”：[{key:“州显示名称”，value:“州显示值”，…]，AU:[{key:“州显示名称”，value:“州显示值”}，]；

// on change handler for country dropdown    
function onCountryChange(country) {
    var $option = $('<option class='state-item'/>');
    var $stateSelect = $('.state');
    var stateList = countryLookup[country];
    $stateSelect.html('');
    $.each(stateList, function(indx, state) {
      $option.clone().val(state.value).text(state.key).appendTo($stateSelect);
    });
}

//关于国家/地区的更改处理程序下拉列表
国家/地区变更职能（国家/地区）{
var$期权=$（''）；
变量$stateSelect=$（'.state'）；
var stateList=countryLookup[country]；
$stateSelect.html（“”）；
$.each（状态列表，函数（indx，状态）{
$option.clone（）.val（state.value）.text（state.key）.appendTo（$stateSelect）；
});
}

您可以保留一个隐藏列表/下拉列表，并对其进行克隆和应用过滤器，并更新html.clone api以供参考->

另一个选项是，您可以将列表保存在javascript变量中，并使用某种模板引擎->

$（'.state'）.html（…）将永久删除其余选项，因此您不会再获取它们。您应该将所有州和城市都包含在一个数组中，以便可以使用它先填充所有，然后进行筛选。或者更好的做法是先筛选数组（而不是dom），然后生成select。

// on change handler for country dropdown    
function onCountryChange(country) {
    var $option = $('<option class='state-item'/>');
    var $stateSelect = $('.state');
    var stateList = countryLookup[country];
    $stateSelect.html('');
    $.each(stateList, function(indx, state) {
      $option.clone().val(state.value).text(state.key).appendTo($stateSelect);
    });
}