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

});

jQuery：第二个函数未正确调用on.change

1 个答案: