1

以下代码表现出非常奇怪的行为......

我有两个 html 选择：一个用于区域，另一个用于部门，请记住，对于一个选定的区域，我正在尝试加载相应的部门。

第一个 html 选择（区域）在正常页面加载时填充，第二个 html 选择（部门）由 ajax 调用从服务器检索 JSON填充。

我使用选择的jquery。

我指的奇怪行为如下：

  • 在第一次更改区域选择时（例如选择区域 A），未填充部门选择。
  • 在区域选择的第二次更改（例如选择区域 B）时，部门选择由区域 A 的部门填充！！！！

Javascript：

$(document).ready(function() {
    $(".chzn-select").chosen({no_results_text: "No results matched"});
    var geolocationRegionSelect = $("#geolocationRegionSelect");
    var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");
    geolocationRegionSelect.bind('change', function(event) {
        $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){
            geolocationDepartmentSelect.empty();
            $.each(result, function() {
                geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department));
            });
        }, 'json');
        $(".chzn-select").trigger("liszt:updated");
    });
});

下面是对应的html：

<div class="control-group">
        <label class="control-label" for="geolocationRegionSelect">geolocation region</label>
        <div class="controls">
            <select id="geolocationRegionSelect">
                <option th:value="''" th:text="'Non renseigne'"></option>
                <option th:each="geolocationRegion: ${geolocationRegions}" th:value="${geolocationRegion.id}" th:text="${geolocationRegion.region}"></option>
            </select>
        </div>
        <div class="controls">
            <select id="geolocationDepartmentSelect" th:field="*{geolocationDepartments}" data-placeholder="Choose a department" multiple="multiple" class="chzn-select">
            </select>
        </div>
    </div>

有人可以请教吗？

编辑：生成的 HTML：

<label class="control-label" for="geolocationRegionSelect">geolocation region</label>
        <div class="controls">
            <select id="geolocationRegionSelect">
                <option value="">Non renseigne</option>
                <option value="1">Alsace</option><option value="2">Aquitaine</option><option value="3">Auvergne</option><option value="4">Basse-Normandie</option><option value="5">Bourgogne</option><option value="6">Bretagne</option><option value="7">Centre</option><option value="8">Champagne-Ardenne</option><option value="9">Corse</option><option value="10">DOM-TOM</option><option value="11">Franche-Comté</option><option value="12">Haute-Normandie</option><option value="13">Ile-de-France</option><option value="14">Languedoc-Roussillon</option><option value="15">Limousin</option><option value="16">Lorraine</option><option value="17">Midi-Pyrénées</option><option value="18">Nord-Pas-de-Calais</option><option value="19">Pays de la Loire</option><option value="20">Picardie</option><option value="21">Poitou-Charentes</option><option value="22">Provence-Alpes-Côte d&#39;Azur</option><option value="23">Rhône-Alpes</option>
            </select>
        </div>
        <div class="controls">
            <select id="geolocationDepartmentSelect" data-placeholder="Choose a department" multiple="multiple" class="chzn-select">
            </select>
        </div>
4

1 回答 1

1

您应该在元素更新后触发更新，在处理程序内部......

$(document).ready(function() {
    $(".chzn-select").chosen({no_results_text: "No results matched"});
    var geolocationRegionSelect = $("#geolocationRegionSelect");
    var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");
    geolocationRegionSelect.bind('change', function(event) {
        $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){
            geolocationDepartmentSelect.empty();
            $.each(result, function() {
                geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department));
             geolocationDepartmentSelect.trigger("liszt:updated");  // <--TO HERE
            });
        }, 'json');
        //<-FROM HERE
    });
});

http://jsfiddle.net/oceog/rQJeX/

你不会得到预期的结果，因为这里的 $.get() 是异步的，得到类比：

  • 你让你的妻子去邮局问他们应该为你父亲的年度杂志订阅付多少钱，你告诉她——“当你回来的时候在那张桌子上留下一张纸条，把旧纸条从这里拿走”（已经在桌子上注释为 100 美元，订阅为 50 美元）。
  • 她离开后，你让你妈妈检查桌子上的一张纸条，然后把它交给你爸爸让他付钱……
  • 你的问题等于那个 - “为什么我父亲付了 100 美元”？
  • 答案是一样的——你必须让你的妻子告诉你的母亲把纸条带给你父亲，当你的妻子刷新桌子上的纸条时。

抱歉英语，如果需要，请随时编辑。

于 2012-12-09T18:48:58.897 回答