AJAX接收多个数据

Question

I am trying to populate some drop down fields. 我正在尝试填充一些下拉字段。 I have the following dropdown: 我有以下下拉列表：

Continent 大陆
Country 国家
Sport 运动

I want to select first Continent, after that the Country and Sport to populate dynamically. 我要选择第一个大陆，然后选择“国家和地区”以动态填充。 Example: 例：

Europe -> (All Europe countries appear correctly, they are in db). 欧洲->（所有欧洲国家/地区均正确显示，它们在db中）。

I choose Algeria; 我选择阿尔及利亚； the Sport names should appear on drop down. 运动名称应出现在下拉菜单中。 The json is correct but the ajax, I know, is wrong! json是正确的，但是我知道ajax是错误的！ Here is my code: 这是我的代码：

 $(document).ready(function(){ $('#select_continents').on('change', function(){ //continent drop down ID $('#select_countries').empty();// country drop down ID $('#select_sport').empty();// sport drop down ID $.ajax({ method: 'GET', url: './json.php', data: { json_continent_country : 1, continent : $('#select_continents').val(), json_country_sport : 1, country : $('#select_countries').val() } }) .done(function(data){ $.each(JSON.parse(data), function(i, val) { $('#select_countries').append('<option value="'+val.id+'">'+val.country_name+'</option>'); $('#select_sport').append('<option value="'+val.id+'">'+val.sport_name+'</option>'); }) }) .fail(function(){ alert('error'); }) }) })

This is what I get: 这是我得到的：

Any advice? 有什么建议吗？

Answer 1

Why are you reloading the sports list only in case the continent is changed? 为什么只在大陆发生变化的情况下才重新载入体育比赛清单？ You are saying that you wish to update the sports list when the country changes, that's not what your code is doing. 您说的是您希望在国家/地区更改时更新体育比赛清单，这不是您的代码所执行的。

Try this instead (omitting any formatting or text elements): 请尝试以下操作（忽略任何格式或文本元素）：

<script type="text/javascript">
$('#continent').on('change', function() {
  var continent= $('#continent').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent
    }, success: function(data) {
      // clear and update sports SELECT
      $('#country').html('');
      for (var i in data) {
        $('#country').append($('<option>').val(data[i].val_id).text(data[i].country_name)
      }
    }
  });
});

$('#country').on('change', function() {
  var continent= $('#continent').val();
  var country= $('#country').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent, // most likely not relevant, country itself should suffice
      "country": country  
    }, success: function(data) {
      // clear and update sports SELECT
      $('#sport').html('');
      for (var i in data) {
        $('#sport').append($('<option>').val(data[i].val_id).text(data[i].sport_name)
      }
    }
  });
});
</script>
<body>
<select id="continent">
  <option value="Europe">Europe</option>
</select>

<select id="country">

</select>

<select id="sport">

</select>
</body>

besides, your val.id in your code is the same for country and sport? 此外，您的代码中的val.id对于国家和地区是否相同？

AJAX接收多个数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-15 10:56:22

AJAX接收多个数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-15 10:56:22

解决方案1
1 已采纳 2016-01-15 10:56:22