如何在启动 ajax 查询的 jQuery 中触发方法 change()

Question

我有一个 select 项 html，其中包含部门列表。当我 select 一个（方法 "change"）时，它在 jquery 中启动一个 ajax 请求，它将显示在另一个 select 输入中，一个城市列表来自数据库。

一切正常，但我有一个案例，我希望能够取回为 departement 和 ville select 项目存储的值，同时我希望能够修改它。

我尝试使用 jQuery.trigger("change")，但它没有进入我的更改功能。

我试着按照这里写的去做，但没有什么区别。

我的 html 文件：

<div class="inscriptionForm">
    <label for="departement">Département :</label>
    <select name="departement" id="departement" required="required">
        <option value="">Choisissez un département</option>
        <c:forEach items="${departements}" var="departement">
            <option value="${departement.code}">${departement.code} - <c:out value="${departement.nom}"/></option>
        </c:forEach>
    </select>
</div>

<div class="inscriptionForm">
    <label for="ville">Ville :</label>
    <select name="ville" id="ville" required="required">
        <option value="">Choisissez une ville</option>
        <c:forEach items="${villes}" var="ville">
            <option value="${ville.id}"><c:out value="${ville.nom}"/></option>
        </c:forEach>
    </select>
</div>

我的 Jquery 方法：

$(document).ready(function(){
        var departement = ${spot.departement.code};
        var ville = ${spot.ville.id};
        $("#departement option[value="+departement+"]").prop('selected', true);
        $('#departement').trigger("change");
        $("#ville option[value="+ville+"]").prop('selected', true);

        $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        .....
                       ajax callback treatment
                       ........
                    });
                }
            );
        });
    });

不明白为什么不进入方法.change();。

Answer 1

你的代码应该是这样的

$(document).ready(function(){
    var departement = ${spot.departement.code};
    var ville = ${spot.ville.id};
    $("#departement option[value="+departement+"]").prop('selected', true);

    $("#ville option[value="+ville+"]").prop('selected', true);

    $('#departement').change(function() {
        var choixDep = $('#departement').val();
        $.getJSON("choixDepartement.do",{codeDep: choixDep},
            function (data) {
                $("#ville").empty();
                var option = "<option value=''>Choisissez une ville</option>";
                $("#ville").append(option);
                $.each( data, function(key, val) {
                    .....
                   ajax callback treatment
                   ........
                });
            }
        );
    });
    $('#departement').trigger("change");
});

在Jquery中我们应该先定义事件然后我们需要触发

Answer 2

要执行，必须在触发器之前声明 eventListener。

Answer 3

再次感谢您。它在之前声明 change() 函数之后工作，但我仍然不知道如何 select 我的 "ville" 选项列表中的值，即使您建议将 setTimeout 设置为 0。执行顺序对我来说似乎很奇怪。我可能还不够了解 jQuery。到目前为止，我的代码看起来像那样，并且 ville 列表没有任何值 selected.

    var departement =${spot.departement.code};
    var ville =${spot.ville.id};

    $("#departement option[value="+departement+"]").prop('selected', true);

    alert(departement);
    alert(ville);

        $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        var valToString = val.toString();
                        var valToArray = valToString.split(",");
                        var option = "<option value=" + valToArray[0] + ">" + valToArray[1] + "</option>";
                        $("#ville").append(option);
                    });
                }
            );
        });

        setTimeout(function(){$('#departement').trigger("change");},0);

        $("#ville option[value="+ville+"]").prop('selected', true);

我的 ville 值，列表在那里，但值没有得到 selected

Answer 4

好的，我找到了问题的完整答案。首先显然是申报顺序的问题。函数 .change() 应该在调用之前声明。但是后来它不起作用，因为 Ajax 请求花费了一定的时间，并且 $("#ville option[value="+ville+"]").prop('selected', true); 在请求发送结果之前执行了。所以我只是把这一行放在 ajax 请求之后，现在它可以正常工作了。所以这是最终代码：

       var departement =${spot.departement.code};

       $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        var valToString = val.toString();
                        var valToArray = valToString.split(",");
                        var option = "<option value=" + valToArray[0] + ">" + valToArray[1] + "</option>";
                        $("#ville").append(option);
                    });
                    $("#ville option[value="+ville+"]").prop('selected', true);
                }
            );
        });

        $("#departement option[value="+departement+"]").prop('selected', true);

        $('#departement').trigger("change");

如何在启动 ajax 查询的 jQuery 中触发方法 change()

How to trigger a method change() in jQuery which launch ajax query

javascript

ajax

jquery

jquery-events