使用JQuery的带有依赖JSON文件的动态填充下拉列表

时间：2018-11-23 20:52:23

标签： javascript jquery

我有3个相关的相互依赖的JSON文件，它们分别是countries.json，states.json和citys.json，我想用我拥有的那些json文件填充3个下拉列表选择框。我第一次在第一个下拉列表中选择一个国家，在第二个下拉列表中看到其国家，但是当我选择另一个国家时，问题就来了，它的状态与先前选择的国家一起出现。 

$(document).ready(function(){
  var countryOptions = '';
  var stateOptions = '';
  var cityOptions = '';

  $.getJSON('countries.json', function(data){
    countryOptions += '<option value="">Select country</option>';
    $.each(data, function(key, country){
      countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
    });
    $('#country').html(countryOptions);
  });

  $(document).on('change', '#country', function(){
   
    var country_id = $(this).val();
    if(country_id != '')
    {
      $.getJSON('states.json', function(data){
        stateOptions += '<option value="">Select state</option>';
        $.each(data, function(key, state){
          if(country_id == state.country_id)
          {
            stateOptions += '<option value="'+state.id+'">'+state.name+'</option>';
          }
        });
        $('#state').html(stateOptions);
      });
    }
    else
    {
       $('#state').html('<option value="">Select state</option>');
       $('#city').html('<option value="">Select city</option>');
    }
  });
  
  $(document).on('change', '#state', function(){
    var state_id = $(this).val();
    if(state_id != '')
    {
      $.getJSON('cities.json', function(data){
        cityOptions += '<option value="">Select city</option>';
        $.each(data, function(key, city){
          if(state_id == city.state_id)
          {
            cityOptions += '<option value="'+city.id+'">'+city.name+'</option>';
          }
        });
        $('#city').html(cityOptions);
      });
    }
    else
    {
       $('#city').html('<option value="">Select city</option>');
    }
  });
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="container" style="width:600px;">
   <h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
  </div>

//countries.json
[
	{
	  "id":"1",
	  "name":"USA"
	}, 
	{
	  "id":"2",
	  "name":"Canada"
	}, 
	{
	  "id":"3",
	  "name":"Australia"
	}
]

//states.json
[
	{
	  "id":"4",
	  "name":"New York",
	  "country_id":"1"
	}, 
	{
	  "id":"5",
	  "name":"Alabama",
	  "country_id":"1"
	}, 
	{
	  "id":"6",
	  "name":"California",
	  "country_id":"1"
	}, 
	{
	  "id":"7",
	  "name":"Ontario",
	  "country_id":"2"
	}, 
	{
	  "id":"8",
	  "name":"British Columbia",
	  "country_id":"2"
	}, 
	{
	  "id":"9",
	  "name":"New South Wales",
	  "country_id":"3"
	}, 
	{
	  "id":"10",
	  "name":"Queensland",
	  "country_id":"3"
	}
]

//cities.json
[
	{
	  "id":"11",
	  "name":"New York city",
	  "state_id":"4"
	}, 
	{
	  "id":"12",
	  "name":"Buffalo",
	  "state_id":"4"
	}, 
	{
	  "id":"13",
	  "name":"Albany",
	  "state_id":"4"
	}, 
	{
	  "id":"14",
	  "name":"Birmingham",
	  "state_id":"5"
	}, 
	{
	  "id":"15",
	  "name":"Montgomery",
	  "state_id":"5"
	}, 
	{
	  "id":"16",
	  "name":"Huntsville",
	  "state_id":"5"
	}, 
	{
	  "id":"17",
	  "name":"Los Angeles",
	  "state_id":"6"
	}, 
	{
	  "id":"18",
	  "name":"San Francisco",
	  "state_id":"6"
	}, 
	{
	  "id":"19",
	  "name":"San Diego",
	  "state_id":"6"
	}, 
	{
	  "id":"20",
	  "name":"Toronto",
	  "state_id":"7"
	}, 
	{
	  "id":"21",
	  "name":"Ottawa",
	  "state_id":"7"
	}, 
	{
	  "id":"22",
	  "name":"Vancouver",
	  "state_id":"8"
	}, 
	{
	  "id":"23",
	  "name":"Victoria",
	  "state_id":"8"
	}, 
	{
	  "id":"24",
	  "name":"Sydney",
	  "state_id":"9"
	}, 
	{
	  "id":"25",
	  "name":"Newcastle",
	  "state_id":"9"
	}, 
	{
	  "id":"26",
	  "name":"City of Brisbane",
	  "state_id":"10"
	}, 
	{
	  "id":"27",
	  "name":"Gold Coast",
	  "state_id":"10"
	}
]

如何解决这个问题？到目前为止，我已经尝试过，我认为错误出在JQuery循环函数$.each(data, function(key, state){});

中

1 个答案:

答案 0 :(得分：1)

$.getJSON('states.json', function(data){ stateOptions +=

这是在获取新数据时附加到现有数据上的信息。更改为此：

$.getJSON('states.json', function(data){ stateOptions = 

$(document).ready(function(){
  var countryOptions = '';
  var stateOptions = '';
  var cityOptions = '';

  $.getJSON('countries.json', function(data){
    countryOptions += '<option value="">Select country</option>';
    $.each(data, function(key, country){
      countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
    });
    $('#country').html(countryOptions);
  });

  $(document).on('change', '#country', function(){
   
    var country_id = $(this).val();
    if(country_id != '')
    {
      $.getJSON('states.json', function(data){
        stateOptions = '<option value="">Select state</option>';
        $.each(data, function(key, state){
          if(country_id == state.country_id)
          {
            stateOptions += '<option value="'+state.id+'">'+state.name+'</option>';
          }
        });
        $('#state').html(stateOptions);
      });
    }
    else
    {
       $('#state').html('<option value="">Select state</option>');
       $('#city').html('<option value="">Select city</option>');
    }
  });
  
  $(document).on('change', '#state', function(){
    var state_id = $(this).val();
    if(state_id != '')
    {
      $.getJSON('cities.json', function(data){
        cityOptions += '<option value="">Select city</option>';
        $.each(data, function(key, city){
          if(state_id == city.state_id)
          {
            cityOptions += '<option value="'+city.id+'">'+city.name+'</option>';
          }
        });
        $('#city').html(cityOptions);
      });
    }
    else
    {
       $('#city').html('<option value="">Select city</option>');
    }
  });
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="container" style="width:600px;">
   <h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
  </div>

注意该代码段仅供操作人员使用。它不会运行，因为它利用了Get请求。

相关问题
最新问题