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

【问题标题】：jQuery filter() for country/state/city list with already loaded data (no ajax calls)jQuery filter() 用于已加载数据的国家/州/城市列表（无 ajax 调用）
【发布时间】：2019-10-17 23:46:41
【问题描述】：

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

在选择国家/地区时，应显示过滤后的州下拉菜单，并根据州选择相应的城市。

我的工作环境是，我无法进行任何 ajax 调用，因为所有国家、州、城市列表都通过后端 API 调用加载到 DOM 中。因此，当页面加载时，所有国家/州/城市列表都会被加载。

我尝试过的： 我已经使用 jquery 过滤器来过滤 jquery 更改事件上的彻底选择值。

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

类似地我写了一个改变状态下拉列表过滤城市的方法

HTML：

<select name="country" id="country" class="country">  
 <option value="US">USA</option>
 <option value="AU">Australia</option>
 ...
</select>

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

有什么办法可以解决这个问题吗？

提前致谢。

【问题讨论】：

$('.state').html(.....) 将永久删除其余选项，因此您不会再获得它们。您应该将所有州和城市放在一个数组中，以便您可以使用它首先填充所有，然后过滤。或者更好的是先过滤数组（不是dom），然后生成select。

标签： javascript jquery html select drop-down-menu

【解决方案1】：

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

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

您可以在 javascript 变量中保留状态列表，然后根据此变量进行过滤

var countryLookup = { "USA": [ {key: "State Display Name", value: "state_value", ...], "AU": [ {key: "State Display Name", value: "state_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);
    });
}

您可以保留一个隐藏的列表/下拉列表，然后克隆并对其应用过滤器并更新 html。克隆api供参考 -> https://api.jquery.com/clone/
其他选项是您可以将列表保存在 javascript 变量中并使用某种模板引擎 -> https://github.com/BorisMoore/jquery-tmpl

【讨论】：