Here is the relevant code that is "resetting" the city and building checkboxes:
$('form').on("change", "select", function(){
var current_index = $(this).index();
if($(this).eq(current_index).val() == 'Z') {
} else {
current.siblings('.city option:first').attr('selected', 'selected');
current.siblings('.building option:first').attr('selected', 'selected');
}
});
So any time you change ANY dropdown, as long as the value isn't Z
, you are setting the city and state to the first option.
Instead of doing $('form').on("change", "select", function(){})
and then if
statements for each input, why don't you monitor the change event for each input directly:
<select id="selState" name="State" class="state">
<option selected disabled>Choose a State</option>
<option value="1">California</option>
<option value="2">New York</option>
</select>
<select id="selCity" name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<select id="selBuilding" name="Building" class="building" disabled="true">
<option value="Z">Select a building</option>
</select>
If you want to populate the city and building dropdowns based on the state dropdown, and do nothing when the city and building dropdowns are changed, you would do something like this:
$('form').on("change", "#selState", function(){
var stateid = $(this).val();
$.getJSON('get_city/', {state_id: stateid}, function(data) {
$('#selCity').html('<option value="Z">Select a city</option>');
for(var i=0; i<data.length; i++){
$('#selCity').append('<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>');
}
});
$.getJSON('get_building/', {state_id: stateid}, function(data) {
$('#selCity').html('<option value="Z">Select a building</option>');
for(var i=0; i<data.length; i++){
$('#selBuilding').append('<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>');
}
});
$('#selCity').attr('disabled', false);
$('#selBuilding').attr('disabled', false);
})
Post a Comment for "Selecting An Option Is Resetting Another Depending Selection Box"