选择一个选项是重置另一个依赖选择框

我有两个选择（城市，建筑）是依赖于用户选择的状态。

 
 
  Choose a State California New York   Select a city   Select a building  

 
  

城市和建筑物从ajax呼叫中拉出json。

jQuery的：

 $(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("Select a fare"); $('.city').eq(current_index).attr('disabled', true); $('.building').eq(current_index).html("Select a fare"); $('.building').eq(current_index).attr('disabled', true); } else { var current = $(this); $.getJSON('get_city/', {state_id: stateid}, function(data) { var options_city = 'Select a city'; for(var i=0; i<data.length; i++){ options_city+=''+data[i].fields['name']+''; } 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 = 'Select a building'; for(var i=0; i<data.length; i++){ options_building+=''+data[i].fields['building']+'; } 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('
' + additional + "
"); }); }); 

json AJAX for city的输出如下：

 New York City Albany 

同样对于建筑物：

 Empire State Building Penn Station 

这里的问题是，当我选择一个城市时，建筑物选择框会重置，所有选项都会消失。 我知道这是因为两个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语句为每个输入，为什么不直接监视每个输入的change事件：

  Choose a State California New York   Select a city   Select a building  

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

 $('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('Select a city'); //Loop through returned cities. for(var i=0; i'+data[i].fields['name']+''); } }); //Get buildings for selected state $.getJSON('get_building/', {state_id: stateid}, function(data) { //add "Select a building option" $('#selCity').html('Select a building'); //Loop through returned buildings. for(var i=0; i'+data[i].fields['name']+''); } }); //enable other select $('#selCity').attr('disabled', false); $('#selBuilding').attr('disabled', false); })