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

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

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

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

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

Что я пробовал: я использовал фильтр jquery, чтобы тщательно отфильтровать значение select в событии изменения jquery.

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

Точно так же я написал метод изменения выпадающего списка состояний для фильтрации города

HTML:

 {amp}lt;select name="country" id="country" class="country"{amp}gt; {amp}lt;option value="US"{amp}gt;USA{amp}lt;/option{amp}gt; {amp}lt;option value="AU"{amp}gt;Australia{amp}lt;/option{amp}gt; ... {amp}lt;/select{amp}gt; 

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

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

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector