Bagaimana untuk melaksanakan fungsi pemilihan hubungan wilayah dan bandar dalam jquery

Dalam pembangunan bahagian hadapan, pemilihan rangkaian wilayah dan bandar adalah fungsi yang sangat asas dan biasa digunakan. Untuk meningkatkan pengalaman pengguna dan meningkatkan kesahan data, pembangun perlu melaksanakan fungsi ini melalui cara teknikal tertentu. Antaranya, jquery ialah perpustakaan JavaScript yang sangat biasa digunakan. Artikel ini akan memperkenalkan cara menggunakan jquery untuk merealisasikan fungsi pemilihan rangkaian wilayah dan majlis perbandaran.

1. Analisis permintaan

1. Memerlukan tiga kotak drop-down, masing-masing mewakili wilayah, bandar dan daerah
2. Selepas memilih wilayah, bandar drop- kotak bawah adalah berdasarkan maklumat wilayah Pemuatan dinamik, kotak lungsur daerah yang sepadan juga akan dimuatkan secara dinamik berdasarkan maklumat peringkat bandar.

2. Seni bina teknikal

1. HTML: Pertama, anda perlu mentakrifkan tiga kotak lungsur (wilayah, bandar, daerah) dan id yang berkaitan
2. CSS: Tentukan gaya kotak lungsur turun;
3. JS/jQuery: Terutamanya menyedari pemuatan dinamik kotak lungsur dan pemindahan data apabila pengguna memilih.

3. Pelaksanaan teknikal

1. Struktur halaman HTML

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

2. Pemuatan data

//先定义几个省市区数据
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. Paparan kesan

Selepas kod di atas dilaksanakan, kita boleh membina kesan hubungan wilayah dan perbandaran berikut:

5

Pemuatan dinamik maklumat wilayah dan bandar melalui jquery bukan sahaja dapat meningkatkan kesan dinamik halaman, tetapi juga menjimatkan masa, memudahkan masa pembangunan dan mencapai pengalaman pengguna dengan lebih baik. Kaedah pelaksanaan tidak sukar dan hanya memerlukan beberapa baris kod Pembangun hanya perlu membuat sedikit pengubahsuaian berdasarkan contoh untuk mendapatkan kesan yang memenuhi keperluan mereka.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemilihan hubungan wilayah dan bandar dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!