我想使用AJAX创建“国家和地区”下拉菜单,我在youtube上关注了一个系列,但出现错误。
当我从第一个下拉菜单中选择一个国家时,
首先,它在城市的下拉列表中没有显示任何内容,但是当我在[$ .each指令]中添加JSON.parse(data)
而不是data
时,它显示的是[object object]
,而不是城市的名称
$(document).ready(function(){
$('select[name="country"]').on('change', function(){
var country_id = $(this).val();
if(country_id){
$.ajax({
url:'/getcities/'+country_id,
type:'GET',
data:'json',
success:function(data){
console.log(data);
$('select[name="city"]').empty();
$.each(data, function(key, value){
$('select[name="city"]').append('<option value="'+key+'">'+ value + '</option>');
});
}
});
}
else{
$('select[name="city"]').empty();
}
});
});
这是国家(地区)下拉菜单:
<select class="form-control" name="country">
<option selected>
Choose your country
</option>
@if($countries->count() > 0)
@foreach($countries as $country)
<option value="{{ $country->id }}"
>{{ $country->value }}</option>
@endforeach
@endif
</select>
这是城市下拉菜单的刀片:
<select class="form-control" name="city">
<option value="" selected>
Choose your city
</option>
</select>
我正在使用Laravel从数据库中检索数据。