时间戳

首页 > 解决方案 > jQuery filter() 用于已加载数据的国家/州/城市列表（无 ajax 调用）

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

问题描述

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

在选择一个国家时，应显示过滤状态下拉菜单，并根据州选择相应的城市。

我在无法进行任何 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>

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

有没有办法克服这个问题？

提前致谢。

标签： javascriptjqueryhtmlselectdrop-down-menu

解决方案

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

正在覆盖您的状态列表，因此您丢失了最初存在的状态列表。有多种解决方法。

  1. 您可以在 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);
    });
}

  2. 您可以保留一个隐藏的列表/下拉列表并克隆并对其应用过滤器并更新 html。克隆 api 供参考 -> https://api.jquery.com/clone/

  3. 其他选项是您可以将列表保存在 javascript 变量中并使用某种模板引擎 - > https://github.com/BorisMoore/jquery-tmpl

推荐阅读