选择一个选项将重置另一个依赖的选择框 [英] Selecting an option is resetting another depending selection box

问题描述

我有两个选择(城市，建筑物)取决于用户选择的州.

I have two selection (city, building) is the dependent on what the users choose for state.

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

City and building is pull as json from an ajax call.

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的输出如下:

The output of the json AJAX for city looks like:

<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调用在同一个函数中.如何使城市和建筑物的选择彼此独立?

The issue here is that when I select a city, the building select box resets and all of the options disappears. I know this is because the two getjson call is in the same function. How do I make it so that the selection of city and building are independent from each other?

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

Once state has been changed and select, I should only need to call $.getjson once until someone changes the state value again.

推荐答案

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

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

因此，只要您更改ANY下拉菜单，只要该值不是Z，您都将城市和州设置为第一个选项.

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.

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

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(){
  //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);
})

这篇关于选择一个选项将重置另一个依赖的选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！