Фильтр jQuery () для списка стран / штатов / городов с уже загруженными данными (без вызовов ajax) - PullRequest
Новая
       7

Фильтр jQuery () для списка стран / штатов / городов с уже загруженными данными (без вызовов ajax)

0 голосов
/ 17 октября 2019

Я создаю форму с тремя раскрывающимися списками: страна, штат и город.

При выборе страны должно отображаться раскрывающееся раскрывающееся состояние штата на основе выбора соответствующих городов.

IЯ работаю в сценарии, где Я не могу совершать какие-либо вызовы ajax , так как все списки стран, штатов и городов загружаются в DOM с помощью вызова API бэкенда. Итак, когда страница загружается, загружаются все списки стран / штатов / городов.

Что я пробовал: Я использовал фильтр 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>

Проблема: Это отлично работает в первый раз,Но в следующий раз, когда я пытаюсь снова изменить страну (с США на Австралию), метод ищет в отфильтрованных штатах США не все списки штатов, которые были загружены при первой загрузке страницы. Итак, выпадающий список будет пустым.

Есть ли способ решить эту проблему?

Заранее спасибо.

1 Ответ

0 голосов
/ 17 октября 2019 
$('.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. Clone API для справки -> https://api.jquery.com/clone/

  3. Другой вариант - вы можете сохранить список в переменной javascript и использовать какой-то движок шаблонов -> https://github.com/BorisMoore/jquery-tmpl
...