How to implement the selection function of province and city linkage in jquery

In front-end development, province and city linkage selection is a very basic and commonly used function. In order to improve user experience and improve data validity, developers need to implement this function through certain technical means. Among them, jquery is a very commonly used JavaScript library. This article will introduce how to use jquery to realize the linkage selection function of provinces and municipalities.

1. Demand analysis

1. Requires three drop-down boxes, representing provinces, cities, and districts respectively;
2. After selecting the province, the city drop-down box is based on the province information Dynamic loading, the corresponding district drop-down box will also be dynamically loaded based on city-level information.

2. Technical Architecture

1. HTML: First, you need to define three drop-down boxes (province, city, district) and their related ids;
2. CSS: Define the style of the drop-down box;
3. JS/jQuery: Mainly realize the dynamic loading of the drop-down box and the data transfer when the user selects.

3. Technical implementation

1. HTML page structure

<select></select>
<select></select>
<select></select>

2. Data loading

//先定义几个省市区数据
var provinceData = [
    { id: '110101', name: '东城区' },
    { id: '110102', name: '西城区' },
    { id: '110105', name: '朝阳区' },
    //...
];

var cityData = [
    { id: '110101', name: '北京市' },
    { id: '110201', name: '天津市' },
    { id: '120101', name: '上海市' },
    //...
];

var districtData = [
    { id: '110101001', name: '东华门街道' },
    { id: '110101002', name: '景山街道' },
    { id: '110101003', name: '交道口街道' },
    //...
];

//动态加载省份数据
$.each(provinceData, function (index, value) {
    $('#province').append('<option>' + value.name + '</option>');
});

//根据省份信息动态加载城市数据
$('#province').on('change', function () {
    var selectProvince = $(this).val();
    $('#city').empty();
    $('#district').empty();
    if (selectProvince === '') {
        $('#city').prop('disabled', true);
        $('#district').prop('disabled', true);
    } else {
        $('#city').prop('disabled', false);
        $('#district').prop('disabled', true);
        $.each(cityData, function (index, value) {
            if (value.id.substring(0, 2) === selectProvince.substring(0, 2)) {
                $('#city').append('<option>' + value.name + '</option>');
            }
        })
    }
});

//根据城市信息动态加载区数据
$('#city').on('change', function () {
    var selectCity = $(this).val();
    $('#district').empty();
    if (selectCity === '') {
        $('#district').prop('disabled', true);
    } else {
        $('#district').prop('disabled', false);
        $.each(districtData, function (index, value) {
            if (value.id.substring(0, 4) === selectCity.substring(0, 4)) {
                $('#district').append('<option>' + value.name + '</option>');
            }
        })
    }
});

4. Effect display

After the above code is implemented, we can construct the following provincial and municipal linkage effects:

5. Summary

Dynamic loading of province and city information through jquery can not only improve the dynamic effect of the page, but also save time, simplify development time, and better achieve user experience. The implementation method is not difficult and only requires a few lines of code. Developers only need to make slight modifications based on the examples to get the effect that meets their needs.

The above is the detailed content of How to implement the selection function of province and city linkage in jquery. For more information, please follow other related articles on the PHP Chinese website!