javascript — Jquery применяет обратный вызов к событию OnChange, которое вызывает API

Jquery применить обратный вызов на событие OnChange, которое вызывает API

Привет я пытаюсь применить обратный вызов для использования на моих динамических полях выбора вместо TimeOut

В настоящее время у меня есть 4 поля выбора (3 являются динамическими опциями): Город, Район (варианты, основанные на опциях города), Уорд (варианты, основанные на округах) и Улица (варианты, основанные на округах)

Это форма поиска, поэтому следующая форма страницы должна иметь предыдущие значения формы, я использую Django, чтобы определить, выбраны ли предыдущие значения формы, тогда, если это так, она добавит скрытый div с id = «value-filter» в шаблон. И теперь я использую Jquery, чтобы проверить, существует ли этот div, чтобы изменить параметры выбора

Если пользователь нажимает на опцию города, он активирует событие onchange city, чтобы вызвать API, в котором параметры округа с соответствующими опциями города идентифицируются, идентичные, Ward и Street, но основаны на опциях округа, чтобы вызвать их API для заполнения. их варианты.

 $(document).ready(function() { //call district api if city option is selected $('select#city').change(function(event) { $.getJSON("/api_get_districts/", { id: $(this).val() }, function(j) { var options = '{amp}lt;option selected disabled{amp}gt;-- District --{amp}lt;/option{amp}gt;'; for (var i = 0; i {amp}lt; j.length; i  ) { options  = '{amp}lt;option value="'   j[i].id   '"{amp}gt;'   j[i].name   '{amp}lt;/option{amp}gt;'; } $("select#district").html(options); }); }); //call ward and street api if district option is selected $('select#district').change(function(event) { $.getJSON("/api_get_wards/", { id: $(this).val() }, function(j) { var options = '{amp}lt;option selected disabled{amp}gt;-- Ward --{amp}lt;/option{amp}gt;'; for (var i = 0; i {amp}lt; j.length; i  ) { options  = '{amp}lt;option value="'   j[i].id   '"{amp}gt;'   j[i].name   '{amp}lt;/option{amp}gt;'; } $("select#ward").html(options); }); $.getJSON("/api_get_streets/", { id: $(this).val() }, function(j) { var options = '{amp}lt;option selected disabled{amp}gt;-- Street --{amp}lt;/option{amp}gt;'; for (var i = 0; i {amp}lt; j.length; i  ) { options  = '{amp}lt;option value="'   j[i].id   '"{amp}gt;'   j[i].name   '{amp}lt;/option{amp}gt;'; } $("select#street").html(options); }); }); // main one to handle select option if the div of a values is present in html if ($('#district-filter').length) { $('select#city').val("{{ filter_form_values.city |safe }}").change(); setTimeout(function() { $('select#district').val("{{ filter_form_values.district |safe }}").change(); if ($('#ward-filter').length) { setTimeout(function() { $('select#ward').val("{{ filter_form_values.ward |safe }}").change(); }, 500); } if ($('#street-filter').length) { setTimeout(function() { $('select#street').val("{{ filter_form_values.street |safe }}").change(); }, 500); } }, 500); } }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label{amp}gt;Tỉnh {amp}lt;/label{amp}gt; {amp}lt;select class="form-control form-control-sm" name="city" id="city" required=""{amp}gt; {amp}lt;option selected="" disabled=""{amp}gt;-- City --{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;Hà Nội{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;Hồ Chí Minh{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;Bình Dương{amp}lt;/option{amp}gt; {amp}lt;option value="4"{amp}gt;Đà Nẵng{amp}lt;/option{amp}gt; {amp}lt;option value="5"{amp}gt;Hải Phòng{amp}lt;/option{amp}gt; {amp}lt;option value="6"{amp}gt;Long An{amp}lt;/option{amp}gt; {amp}lt;option value="7"{amp}gt;Bà Rịa Vũng Tàu{amp}lt;/option{amp}gt; {amp}lt;option value="8"{amp}gt;An Giang{amp}lt;/option{amp}gt; {amp}lt;option value="9"{amp}gt;Bắc Giang{amp}lt;/option{amp}gt; {amp}lt;option value="10"{amp}gt;Bắc Kạn{amp}lt;/option{amp}gt; {amp}lt;option value="11"{amp}gt;Bạc Liêu{amp}lt;/option{amp}gt; {amp}lt;option value="12"{amp}gt;Bắc Ninh{amp}lt;/option{amp}gt; {amp}lt;option value="13"{amp}gt;Bến Tre{amp}lt;/option{amp}gt; {amp}lt;option value="14"{amp}gt;Bình Định{amp}lt;/option{amp}gt; {amp}lt;option value="15"{amp}gt;Bình Phước{amp}lt;/option{amp}gt; {amp}lt;option value="16"{amp}gt;Bình Thuận{amp}lt;/option{amp}gt; {amp}lt;option value="17"{amp}gt;Cà Mau{amp}lt;/option{amp}gt; {amp}lt;option value="18"{amp}gt;Cần Thơ{amp}lt;/option{amp}gt; {amp}lt;option value="19"{amp}gt;Cao Bằng{amp}lt;/option{amp}gt; {amp}lt;option value="20"{amp}gt;Đắk Lắk{amp}lt;/option{amp}gt; {amp}lt;option value="21"{amp}gt;Đắk Nông{amp}lt;/option{amp}gt; {amp}lt;option value="22"{amp}gt;Điện Biên{amp}lt;/option{amp}gt; {amp}lt;option value="23"{amp}gt;Đồng Nai{amp}lt;/option{amp}gt; {amp}lt;option value="24"{amp}gt;Đồng Tháp{amp}lt;/option{amp}gt; {amp}lt;option value="25"{amp}gt;Gia Lai{amp}lt;/option{amp}gt; {amp}lt;option value="26"{amp}gt;Hà Giang{amp}lt;/option{amp}gt; {amp}lt;option value="27"{amp}gt;Hà Nam{amp}lt;/option{amp}gt; {amp}lt;option value="28"{amp}gt;Hà Tĩnh{amp}lt;/option{amp}gt; {amp}lt;option value="29"{amp}gt;Hải Dương{amp}lt;/option{amp}gt; {amp}lt;option value="30"{amp}gt;Hậu Giang{amp}lt;/option{amp}gt; {amp}lt;option value="31"{amp}gt;Hòa Bình{amp}lt;/option{amp}gt; {amp}lt;option value="32"{amp}gt;Hưng Yên{amp}lt;/option{amp}gt; {amp}lt;option value="33"{amp}gt;Khánh Hòa{amp}lt;/option{amp}gt; {amp}lt;option value="34"{amp}gt;Kiên Giang{amp}lt;/option{amp}gt; {amp}lt;option value="35"{amp}gt;Kon Tum{amp}lt;/option{amp}gt; {amp}lt;option value="36"{amp}gt;Lai Châu{amp}lt;/option{amp}gt; {amp}lt;option value="37"{amp}gt;Lâm Đồng{amp}lt;/option{amp}gt; {amp}lt;option value="38"{amp}gt;Lạng Sơn{amp}lt;/option{amp}gt; {amp}lt;option value="39"{amp}gt;Lào Cai{amp}lt;/option{amp}gt; {amp}lt;option value="40"{amp}gt;Nam Định{amp}lt;/option{amp}gt; {amp}lt;option value="41"{amp}gt;Nghệ An{amp}lt;/option{amp}gt; {amp}lt;option value="42"{amp}gt;Ninh Bình{amp}lt;/option{amp}gt; {amp}lt;option value="43"{amp}gt;Ninh Thuận{amp}lt;/option{amp}gt; {amp}lt;option value="44"{amp}gt;Phú Thọ{amp}lt;/option{amp}gt; {amp}lt;option value="45"{amp}gt;Phú Yên{amp}lt;/option{amp}gt; {amp}lt;option value="46"{amp}gt;Quảng Bình{amp}lt;/option{amp}gt; {amp}lt;option value="47"{amp}gt;Quảng Nam{amp}lt;/option{amp}gt; {amp}lt;option value="48"{amp}gt;Quảng Ngãi{amp}lt;/option{amp}gt; {amp}lt;option value="49"{amp}gt;Quảng Ninh{amp}lt;/option{amp}gt; {amp}lt;option value="50"{amp}gt;Quảng Trị{amp}lt;/option{amp}gt; {amp}lt;option value="51"{amp}gt;Sóc Trăng{amp}lt;/option{amp}gt; {amp}lt;option value="52"{amp}gt;Sơn La{amp}lt;/option{amp}gt; {amp}lt;option value="53"{amp}gt;Tây Ninh{amp}lt;/option{amp}gt; {amp}lt;option value="54"{amp}gt;Thái Bình{amp}lt;/option{amp}gt; {amp}lt;option value="55"{amp}gt;Thái Nguyên{amp}lt;/option{amp}gt; {amp}lt;option value="56"{amp}gt;Thanh Hóa{amp}lt;/option{amp}gt; {amp}lt;option value="57"{amp}gt;Thừa Thiên Huế{amp}lt;/option{amp}gt; {amp}lt;option value="58"{amp}gt;Tiền Giang{amp}lt;/option{amp}gt; {amp}lt;option value="59"{amp}gt;Trà Vinh{amp}lt;/option{amp}gt; {amp}lt;option value="60"{amp}gt;Tuyên Quang{amp}lt;/option{amp}gt; {amp}lt;option value="61"{amp}gt;Vĩnh Long{amp}lt;/option{amp}gt; {amp}lt;option value="62"{amp}gt;Vĩnh Phúc{amp}lt;/option{amp}gt; {amp}lt;option value="63"{amp}gt;Yên Bái{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label{amp}gt;District {amp}lt;/label{amp}gt; {amp}lt;div id="district-filter" style="display: none"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;select class="form-control form-control-sm" name="district" id="district"{amp}gt; {amp}lt;option selected="" disabled=""{amp}gt;-- District --{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label{amp}gt;Ward {amp}lt;/label{amp}gt; {amp}lt;div id="ward-filter" style="display: none"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;select class="form-control form-control-sm" name="ward" id="ward"{amp}gt; {amp}lt;option selected="" disabled=""{amp}gt;-- Ward --{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label{amp}gt;Street {amp}lt;/label{amp}gt; {amp}lt;div id="street-filter" style="display: none"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;select class="form-control form-control-sm" name="street" id="street"{amp}gt; {amp}lt;option selected="" disabled=""{amp}gt;-- Street --{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; 

Все работало отлично, но теперь я хочу попробовать изменить функцию timeOut в if ($ (‘district-filter’). Length) {} на обратный вызов. Я пробовал следующее с помощью когда () применить обратный вызов:

 if ($('#district-filter').length) { $.when($('select#city').val("{{ filter_form_values.city |safe }}").change()).then(function() { $.when($('select#district').val("{{ filter_form_values.district |safe }}").change()).then(function() { if ($('#ward-filter').length) { $('select#ward').val("{{ filter_form_values.ward |safe }}").change(); } if ($('#street-filter').length) { $('select#street').val("{{ filter_form_values.street |safe }}").change(); } }); }); } 

При загрузке страницы выбирается город и загружается район, но параметры района не выбираются, поэтому параметры района и улицы также пусты.

Как я могу использовать обратный вызов, чтобы дождаться, пока мой API заполняет опции, а затем выбрать эту опцию?

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