AJAX 接收多个数据

Question

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

大陆
国家
运动

我想 select 首先是大陆，然后是国家和体育动态填充。示例：

欧洲 ->（所有欧洲国家正确显示，它们在 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 接收多个数据

AJAX Receive multiple data

javascript

json

ajax

http-get