选择JQuery的Javascript问题和我的调用代码 [英] Javascript issue with JQuery chosen and my calling code

问题描述

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

The following code is exhibiting a very strange behavior...

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

I have two html selects: one for regions and another one for departments bearing in mind that for one selected region I am trying to load the corresponding departments.

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

The first html select (region) is populated upon normal page load and the second html select (departments) by an ajax call retrieving JSON from the server.

我选择使用jquery。

I use jquery chosen.

我所指的奇怪行为如下：

The strange behavior I am referring to is as follows:

• 首次更改区域选择（例如选择区域A）时，部门选择未填充。


• 第二次更改时区域选择（比如选择区域B），部门选择由区域A的部门填充!!!!

• upon a first change of the region select (say region A is selected), the department select is not populated.
• Upon a second change of the region select (say region B is selected), the department select is populated by region A's departments!!!!

Javascript：

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>

任何人都可以提供建议吗？

Can anyone please advise?

编辑：生成的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>

推荐答案

你应该在 >元素更新，内部处理程序...

You should trigger update after element updated, inside handler...

$(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（）这里是异步的，得到比喻：

You not get epected results because $.get() here is asynchronous, get the analogy:

• 你问你的妻子去邮局询问你应该为你父亲的年度杂志订阅支付多少钱，你告诉她 - 当你回到那张桌子上留言时，从这里删除旧纸条（在桌子上已有100美元的纸币，订阅费为50美元）。


• 之后她让你的母亲检查桌子上的一张纸条，然后交给你父亲让他付钱......


• 你的问题等于 - 为什么我的父亲付了100美元？


• 答案就是这样 - 你必须要求你的妻子告诉你的母亲给你父亲带来便条，当你的妻子刷新桌子上的便条时。

• You ask your wife to go to the post office and ask them how much you should pay for your father's annual magazine subscription, you tell her - "when you back leave note on that table, and remove old note from here" (on table already the note for 100$, subscription is 50$).
• After she leaves you ask your mother to check a note on the table and give it to your father to make him pay...
• your question is equal to that - "why my father payed 100$" ?
• the answer is equal to that - you had to ask your wife to tell your mother to bring note to your father, when note on the table will be refreshed by your wife.

对不起英文，如果需要，随时编辑。

sorry for english, feel free to edit that if needed.

这篇关于选择JQuery的Javascript问题和我的调用代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！