如何用jQuery和AJAX实现省市区三级联动选择？

三级联动用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实现省市区三级联动选择？的详细内容，