Question

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

<form method="post">
  <div class="summary">
    <div class="trip">
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option>California</option>
        <option>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).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 stateid = $(this).val();
      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调用是在同一个函数中。我如何做到这样才能让城市和建筑的选择彼此独立？

jsFiddle在这里没用，但我也把它包括在内。

https://jsfiddle.net/1mxrs8yq/

Answer 1

您可以使用解决方案https://jsfiddle.net/1mxrs8yq/3/

＆＃13;

    $(document).ready(function() {
      var additional = $('.trip').html();
      $('#result').hide();
      $('form').on("change", "select[name='State']", function(){
        var current_index = $(this).index();
	
        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 stateid = $(this).val();
          var current = $(this);
          var data = [{
          	pk: 1,
            name: 'New York'
          },
          {
          	pk: 2,
            name: 'Test2'
          }];
          
          //$.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]['name']+'</option>';
       			}
            
            $(this).next().html(options_city);
            $(this).next()[0].selectedIndex = 0;
            $(this).next().attr('disabled', false);
         // });
         var data1 = [{
          	pk: 1,
            building: 'test24'
          },
          {
          	pk: 2,
            building: 'test78'
          }];
         
          //$.getJSON('get_building/', {state_id: stateid}, function(data) {    
            var options_building = '<option value="Z">Select a building</option>';
            for(var i=0; i<data1.length; i++){
         			options_building+='<option value="'+data1[i].pk+'">'+data1[i]['building']+'</option>';
        		}  
            
            $(this).next().next().html(options_building);
            $(this).next().next()[0].selectedIndex = 0;
            $(this).next().next().attr('disabled', false);
          //});
        }
      });  
      $('#add').click(function() {
        if ($('.summary').children().length >= 4) return;
        $('.summary').append('<div class="trip">' + additional + "<div>");
      });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
      <div class="summary">
        <div class="trip">
          <select name="State" class="state">
            <option selected disabled>Choose a State</option>
            <option>California</option>
            <option>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>
      
      <button type="button" id="add">Add another trip</button>

＆＃13;

在解决方案中，我已经注释掉了getJSON。并假设数据将采用某种格式。我创建了两个变量数据＆amp;而不是getJSON数据。 数据1 城市＆amp;分别构建下拉列表。

如何在两个相关的选择字段上允许独立的jquery操作？

1 个答案: