Jquery 在调用 api 的 OnChange 事件上应用回调答案

【问题标题】：Jquery apply callback on OnChange event which call apiJquery 在调用 api 的 OnChange 事件上应用回调
【发布时间】：2019-10-09 04:51:41
【问题描述】：

您好，我正在尝试应用回调以在我的动态选择框上使用而不是 TimeOut

目前我有 4 个选择框（3 个是动态选项）：City、District（基于城市选项的选项）、Ward（基于地区选项的选项）和 Street（基于地区选项的选项）

这是一个搜索表单，所以下一页表单应该有以前的表单值，我使用 Django 来确定以前的表单值是否是 select ，然后如果是这样，它将添加一个隐藏的 div，其中 id="value-filter"模板。现在我使用 Jquery 检查该 div 是否存在以更改选择选项

如果用户点击城市选项，那么它将激活城市 onchange 事件以调用一个 api，该 api 用相应的城市 ID 填充 District 选项，Ward 和 Street 选项相同，但基于 District 选项来调用他们的 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 = '<option selected disabled>-- District --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("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 = '<option selected disabled>-- Ward --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("select#ward").html(options);
    });
    $.getJSON("/api_get_streets/", {
      id: $(this).val()
    }, function(j) {
      var options = '<option selected disabled>-- Street --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("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);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Tỉnh </label>
  <select class="form-control form-control-sm" name="city" id="city" required="">
    <option selected="" disabled="">-- City --</option>

    <option value="1">Hà Nội</option>

    <option value="2">Hồ Chí Minh</option>

    <option value="3">Bình Dương</option>

    <option value="4">Đà Nẵng</option>

    <option value="5">Hải Phòng</option>

    <option value="6">Long An</option>

    <option value="7">Bà Rịa Vũng Tàu</option>

    <option value="8">An Giang</option>

    <option value="9">Bắc Giang</option>

    <option value="10">Bắc Kạn</option>

    <option value="11">Bạc Liêu</option>

    <option value="12">Bắc Ninh</option>

    <option value="13">Bến Tre</option>

    <option value="14">Bình Định</option>

    <option value="15">Bình Phước</option>

    <option value="16">Bình Thuận</option>

    <option value="17">Cà Mau</option>

    <option value="18">Cần Thơ</option>

    <option value="19">Cao Bằng</option>

    <option value="20">Đắk Lắk</option>

    <option value="21">Đắk Nông</option>

    <option value="22">Điện Biên</option>

    <option value="23">Đồng Nai</option>

    <option value="24">Đồng Tháp</option>

    <option value="25">Gia Lai</option>

    <option value="26">Hà Giang</option>

    <option value="27">Hà Nam</option>

    <option value="28">Hà Tĩnh</option>

    <option value="29">Hải Dương</option>

    <option value="30">Hậu Giang</option>

    <option value="31">Hòa Bình</option>

    <option value="32">Hưng Yên</option>

    <option value="33">Khánh Hòa</option>

    <option value="34">Kiên Giang</option>

    <option value="35">Kon Tum</option>

    <option value="36">Lai Châu</option>

    <option value="37">Lâm Đồng</option>

    <option value="38">Lạng Sơn</option>

    <option value="39">Lào Cai</option>

    <option value="40">Nam Định</option>

    <option value="41">Nghệ An</option>

    <option value="42">Ninh Bình</option>

    <option value="43">Ninh Thuận</option>

    <option value="44">Phú Thọ</option>

    <option value="45">Phú Yên</option>

    <option value="46">Quảng Bình</option>

    <option value="47">Quảng Nam</option>

    <option value="48">Quảng Ngãi</option>

    <option value="49">Quảng Ninh</option>

    <option value="50">Quảng Trị</option>

    <option value="51">Sóc Trăng</option>

    <option value="52">Sơn La</option>

    <option value="53">Tây Ninh</option>

    <option value="54">Thái Bình</option>

    <option value="55">Thái Nguyên</option>

    <option value="56">Thanh Hóa</option>

    <option value="57">Thừa Thiên Huế</option>

    <option value="58">Tiền Giang</option>

    <option value="59">Trà Vinh</option>

    <option value="60">Tuyên Quang</option>

    <option value="61">Vĩnh Long</option>

    <option value="62">Vĩnh Phúc</option>

    <option value="63">Yên Bái</option>

  </select>
</div>
<div class="form-group">
  <label>District </label>
  <div id="district-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="district" id="district">
    <option selected="" disabled="">-- District --</option>
  </select>
</div>
<div class="form-group">
  <label>Ward </label>
  <div id="ward-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="ward" id="ward">
    <option selected="" disabled="">-- Ward --</option>
  </select>
</div>
<div class="form-group">
  <label>Street </label>
  <div id="street-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="street" id="street">
    <option selected="" disabled="">-- Street --</option>
  </select>
</div>

一切都很好，但现在我想尝试将 if ($('#district-filter').length) {} 中的 timeOut 函数更改为回调。我通过使用 when() 来应用回调尝试了以下操作：

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();
            }
        });
    });
}

在页面加载时，选择了城市并加载了区，但未选择区选项，因此 Ward 和 Street 选项也为空。

如何使用回调来等待我的 Api 填充选项然后选择该选项？

【问题讨论】：

标签： javascript jquery html django

【解决方案1】：

我决定只使用普通回调并在检查中添加请求 api 函数：

if ($('#city-filter').length) {
    $('select#city').val("{{ filter_form_values.city |safe }}").change();
}
if ($('#district-filter').length || $('#ward-filter').length || $('#street-filter').length) {
    $.getJSON("/api_get_district/", {
        id: "{{ filter_form_values.city |safe }}"
    }, function(j) {
        var options = '<option selected disabled>-- District --</option>';
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
        }
        $("select#district").html(options);
        $('select#district').val("{{ filter_form_values.district |safe }}").change();
        if ($('#ward-filter').length) {
            $.getJSON("/api_get_ward/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Ward --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#ward").html(options);
                $('select#ward').val("{{ filter_form_values.ward |safe }}").change();
            });
        }
        if ($('#street-filter').length) {
            $.getJSON("/api_get_street/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Street --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#street").html(options);
                $('select#street').val("{{ filter_form_values.street |safe }}").change();
            });
        }
    });
}

还将城市检查添加到 html：

<div id="city-filter" style="display: none"></div>

现在它起作用了，但我会接受任何改进它的建议作为答案（因为调用 api 2 次不是一个好主意）！

【讨论】：