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

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

// 省份
$.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
                }));
            });
        }
    });
});