The following code is exhibiting a very strange behavior...
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.
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.
I use jquery chosen.
The strange behavior I am referring to is as follows:
- 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:
$(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");
});
});
Here is the corresponding 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?
EDIT: Generated 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'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>