AJAX接收多个数据

Question

我正在尝试填充一些下拉字段。 我有以下下拉列表：

大陆
国家
运动

我要选择第一个大陆，然后选择“国家和地区”以动态填充。 例：

欧洲->（所有欧洲国家/地区均正确显示，它们在db中）。

我选择阿尔及利亚； 运动名称应出现在下拉菜单中。 json是正确的，但是我知道ajax是错误的！ 这是我的代码：

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

这是我得到的：

有什么建议吗？

Answer 1

为什么只在大陆发生变化的情况下才重新载入体育比赛清单？ 您说的是您希望在国家/地区更改时更新体育比赛清单，这不是您的代码所执行的。

请尝试以下操作（忽略任何格式或文本元素）：

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

此外，您的代码中的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