个人中心
gpt4 book ai didi

javascript - AJAX接收多个数据

转载 作者：行者123 更新时间：2023-11-27 23:27:50 24 4
gpt4 key购买 nike

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

  1. 大陆
  2. 国家
  3. 运动

我想选择第一个大陆，然后选择动态填充的国家/地区和体育项目。示例:

  1. 欧洲 ->(所有欧洲国家都正确显示，它们位于 db 中)。

  2. 我选择 Algolia ；运动名称应出现在下拉列表中。 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');
        })            
    })
    })

    这就是我得到的:

enter image description here

有什么建议吗？

最佳答案

为什么只有在大陆发生变化时才重新加载体育列表？您是说您希望在国家/地区发生变化时更新体育列表，但这不是您的代码所做的。

试试这个(省略任何格式或文本元素):

<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 对于国家/地区和运动项目是相同的吗？

关于javascript - AJAX接收多个数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34809230/

24 4 0
文章推荐： javascript - 在javascript中获取标签的rel
文章推荐： javascript - 在声明 const 之前在函数中引用 const 时，如何避免 jshint 说 const 未定义？
文章推荐： javascript - 设置表单默认参数
文章推荐： javascript - 如何在 Javascript 中删除多个选择选项列表中的重复值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com