JQuery:第二个函数在 .change 上没有被正确调用

Question

我正在开发一个 Django APP，它有一个包含 3 个字段的表单：department、province、district（还有更多，但问题出在这 3 个）。

因此，当用户更改部门选择选项时，应调用后端以检索省和区。

当用户更改省份时，必须调用后端以检索相应的区域时，也会发生同样的情况。

为了实现这一点，我有 2 个功能，可以正确完成工作：get_provinces()、get_districts() 。

我的问题：如何确保第二个功能，即get_districts()，在更换部门时被调用？

法典：

function get_provinces() {
  var val_d = $("#id_shipping_department").val()
  $.ajax({
    url: "/province/",
    data: { // Pass parameters in separate object
      d_name: val_d
    },
  }).done(function(result) {
    $("#id_shipping_province").html(result);
  });
}
function get_districts() {
  var val_d = $("#id_shipping_department").val()
  var val_p = $("#id_shipping_province").val()
  $.ajax({
    url: "/district/",
    data: { // Pass parameters in separate object
      d_name: val_d,
      p_name: val_p
    },
  }).done(function(result) {
    $("#id_shipping_district").html(result);
  });
}
$("document").ready(function() {
  $("#id_shipping_department").change(function() {
    get_provinces();
    get_districts();
  });
  $("#id_shipping_province").change(function() {
    get_districts();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th><label for="id_cellphone">Celular o  teléfono:</label></th>
    <td>
      <input type="text" name="cellphone" maxlength="15" required id="id_cellphone">
    </td>
  </tr>
  <tr>
    <th><label for="id_shipping_address1">Dirección de envío:</label></th>
    <td>
      <input type="text" name="shipping_address1" maxlength="100" required id="id_shipping_address1">
    </td>
  </tr>
  <tr>
    <th><label for="id_shipping_address2">Dirección de envío 2 (opcional):</label></th>
    <td>
      <input type="text" name="shipping_address2" maxlength="100" id="id_shipping_address2">
    </td>
  </tr>
  <tr>
    <th><label for="id_shipping_department">Shipping department:</label></th>
    <td>
      <select name="shipping_department" id="id_shipping_department">
        <option value="Tumbes">Tumbes</option>
        <option value="Pasco">Pasco</option>
        <option value="Ucayali">Ucayali</option>
        <option value="Callao">Callao</option>
        <option value="Ayacucho">Ayacucho</option>
        <option value="Áncash">Áncash</option>
        <option value="Loreto">Loreto</option>
        <option value="Cajamarca">Cajamarca</option>
        <option value="Lambayeque">Lambayeque</option>
        <option value="Moquegua">Moquegua</option>
        <option value="Puno">Puno</option>
        <option value="Tacna">Tacna</option>
        <option value="Arequipa">Arequipa</option>
        <option value="Apurímac">Apurímac</option>
        <option value="Junín">Junín</option>
      </select>
    </td>
  </tr>
  <tr>
    <th><label for="id_shipping_province">Shipping province:</label></th>
    <td>
      <select name="shipping_province" id="id_shipping_province">
        <option value="Contralmirante Villar">Contralmirante Villar</option>
        <option value="Tumbes">Tumbes</option>
        <option value="Zarumilla">Zarumilla</option>
      </select>
    </td>
  </tr>
  <tr>
    <th><label for="id_shipping_district">Shipping district:</label></th>
    <td>
      <select name="shipping_district" id="id_shipping_district">
        <option value="Canoas de Punta Sal">Canoas de Punta Sal</option>
        <option value="Zorritos">Zorritos</option>
        <option value="Casitas">Casitas</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

问题可能是由于 js 的异步性质造成的。 您可以尝试使用async await

我已经更改了js代码，您可以尝试以下操作：

function get_provinces() {
    // notice the promise
    return new Promise(function (resolve, reject) {
        var val_d = $("#id_shipping_department").val()
        $.ajax({
            url: "/province/",
            data: { // Pass parameters in separate object
                d_name: val_d
            },
        }).done(function (result) {
            $("#id_shipping_province").html(result);
            resolve(result)
        });
    });
}

function get_districts() {
    return new Promise(function (resolve, reject) {
        var val_d = $("#id_shipping_department").val()
        var val_p = $("#id_shipping_province").val()
        $.ajax({
            url: "/district/",
            data: { // Pass parameters in separate object
                d_name: val_d,
                p_name: val_p
            },
        }).done(function (result) {
            $("#id_shipping_district").html(result);
            resolve(result)
        });
    });
}
$("document").ready(function () {
    $("#id_shipping_department").change(async /* <--- */ function () {
        await /* <--- */ get_provinces();
        await /* <--- */ get_districts();
    });
    $("#id_shipping_province").change(async /* <--- */ function () {
        await get_districts();
    });
});