我正在尝试填充一些下拉字段。我有以下下拉菜单:
- 大陆
- 国家
- 运动
我想选择第一个大陆，然后选择动态填充的国家/地区和体育项目。示例:
欧洲 ->(所有欧洲国家都正确显示，它们位于 db 中)。
我选择 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'); }) }) })这就是我得到的:
有什么建议吗？
最佳答案
为什么只有在大陆发生变化时才重新加载体育列表？您是说您希望在国家/地区发生变化时更新体育列表，但这不是您的代码所做的。
试试这个(省略任何格式或文本元素):
<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/