时间戳

首页 > 解决方案 > JQuery：第二个函数没有被正确调用 on.change

jquery - JQuery：第二个函数没有被正确调用 on.change

问题描述

我正在开发一个 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>

标签： jquery

解决方案

问题可能是由于 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();
    });

});

推荐阅读