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。

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("<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 for city的输出如下：

<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

以下是＆＃34;重置＆＃34;的相关代码。城市和建筑复选框：

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

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

1 个答案: