三级联动用ajax实现 省级下二级 市区级三级联动 jquery
在web开发中，三级联动是非常常见的操作。例如选择省份的时候，市级也会跟着变化，选择市，区级也会跟着变化。
html
<select id="province"></select> <select id="city"></select> <select id="area"></select>
登录后复制
javascript
// 省份
$.ajax({
url: '/api/province',
method: 'GET',
success: function(data) {
$.each(data, function(index, item) {
$('#province').append($('<option>', {
value: item.id,
text: item.name
}));
});
}
});
// 市
$('#province').change(function() {
var provinceId = $(this).val();
$.ajax({
url: '/api/city/' + provinceId,
method: 'GET',
success: function(data) {
$('#city').html('');
$.each(data, function(index, item) {
$('#city').append($('<option>', {
value: item.id,
text: item.name
}));
});
$('#city').trigger('change');
}
});
});
// 区
$('#city').change(function() {
var cityId = $(this).val();
$.ajax({
url: '/api/area/' + cityId,
method: 'GET',
success: function(data) {
$('#area').html('');
$.each(data, function(index, item) {
$('#area').append($('<option>', {
value: item.id,
text: item.name
}));
});
}
});
});
登录后复制
以上就是如何用jQuery和AJAX实现省市区三级联动选择？的详细内容，更多请关注php中文网其它相关文章！