选择一个选项将重置另一个取决于选择框的选项

Question

我有两个选择(城市，建筑物(取决于用户为状态选择的内容。

<form method="post">
<div class="summary">
<div class="trip">
<select name="State" class="state">
<option selected disabled>Choose a State</option>
<option value="1">California</option>
<option value="2">New York</option>
</select>
<select name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<select name="Building" class="building" disabled="true">
<option value="Z">Select a building</option>
</select>
<br><br>
</div>
</div>

城市和建筑物是从 ajax 调用中提取的 json。

j查询：

$(document).ready(function() {
var additional = $('.trip').html();
$('#result').hide();
$('form').on("change", "select", function(){
var current_index = $(this).index();
if ($(this).is('.state')) {
var stateid = $(this).val();
}
else {
var stateid = $(this).siblings('.state').val();
};
if($(this).eq(current_index).val() == 'Z') {
$('.city').eq(current_index).html("<option>Select a fare</option>");
$('.city').eq(current_index).attr('disabled', true);
$('.building').eq(current_index).html("<option>Select a fare</option>");
$('.building').eq(current_index).attr('disabled', true);
}
else {
var current = $(this);
$.getJSON('get_city/', {state_id: stateid}, function(data) {
var options_city = '<option value="Z">Select a city</option>';
for(var i=0; i<data.length; i++){
options_city+='<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>';
}
current.siblings('.city').html(options_city);
current.siblings('.city option:first').attr('selected', 'selected');
current.siblings('.city').attr('disabled', false);
});
$.getJSON('get_building/', {state_id: stateid}, function(data) {        
var options_building = '<option value="Z">Select a building</option>';
for(var i=0; i<data.length; i++){
options_building+='<option value="'+data[i].pk+'">'+data[i].fields['building']+</option>';
}  
current.siblings('.building').html(options_building);
current.siblings('.building option:first').attr('selected', 'selected');
current.siblings('.building').attr('disabled', false);
});
}
});  
$('#add').click(function() {
if ($('.summary').children().length >= 4) return;
$('.summary').append('<div class="trip">' + additional + "<div>");
});
});

用于城市的 json AJAX 的输出如下所示：

<option value="1">New York City</option>
<option value="2">Albany</option>

同样，对于建筑物：

<option value="1">Empire State Building</option>
<option value="2">Penn Station</option>

这里的问题是，当我选择一个城市时，建筑物选择框会重置，所有选项都会消失。我知道这是因为两个 getjson 调用在同一个函数中。如何使城市和建筑的选择相互独立？

一旦状态被更改并选择，我只需要调用$.getjson一次，直到有人再次更改状态值。

Answer 1

以下是"重置"城市和建筑物复选框的相关代码：

$('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');
}
});

因此，无论何时更改"任何"下拉列表，只要该值不是Z，就可以将城市和州设置为第一个选项。

---

与其对每个输入执行$('form').on("change", "select", function(){})然后if语句，不如直接监视每个输入的更改事件：

<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>

如果要根据州下拉列表填充城市和建筑物下拉列表，并且在更改城市和建筑物下拉列表时不执行任何操作，则可以执行以下操作：

$('form').on("change", "#selState", function(){
//get state id
var stateid = $(this).val();
//Get cities for selected state
$.getJSON('get_city/', {state_id: stateid}, function(data) {
//add "Select a city option"
$('#selCity').html('<option value="Z">Select a city</option>');
//Loop through returned cities.
for(var i=0; i<data.length; i++){
//add city to select
$('#selCity').append('<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>');
}
});
//Get buildings for selected state
$.getJSON('get_building/', {state_id: stateid}, function(data) {
//add "Select a building option"
$('#selCity').html('<option value="Z">Select a building</option>');
//Loop through returned buildings.
for(var i=0; i<data.length; i++){
//add building to select
$('#selBuilding').append('<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>');
}
});
//enable other select
$('#selCity').attr('disabled', false);
$('#selBuilding').attr('disabled', false);
})