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

Question

我有一个带有部门列表的选择项目 html。当我选择一个(方法“更改”)时，它会在 jquery 中启动一个 ajax 请求，该请求将显示在另一个选择输入中，即从数据库中获取的城市列表。

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

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

我试着按照这里写的去做，但没有区别。 jquery trigger change with chained ajax select

我的 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中我们应该先定义事件然后我们需要触发