写个用jQuery实现的三级省市县联动

模拟数据从网上摘抄的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <select id="selProvince">
        <option>--请选择--</option>
    </select>
    <select id="selCity">
        <option>--请选择--</option>
    </select>
    <select id="selCounty">
        <option>--请选择--</option>
    </select>
</body>
<script src="./jquery.js"></script>
<script>
    $(function () {
        var aProvince = ["河北省", "山西省", "湖北省"];
        var aCity = [
            ["石家庄市", "张家口市", "承德市", "秦皇岛市"],
            ["太原市", "朔州市", "大同市", "阳泉市"],
            ["武汉市", "孝感市", "宜昌市", "襄阳市"]
        ];
        var aCounty = [
            [
                ["无极县", "赵县", "栾城县"],
                ["沽源县", "尚义县", "阳原县"],
                ["平泉县", "滦平县", "隆化县"],
                ["抚宁县", "卢龙县", "昌黎县"]
            ],
            [
                ["清徐县", "阳曲县", "娄烦县"],
                ["山阴县", "应县", "右玉县"],
                ["左云县", "阳高县", "天镇县"],
                ["盂县", "平定县", "矿区"]
            ],
            [
                ["武昌区", "洪山区", "东湖新区"],
                ["云梦县", "大悟县", "应城市"],
                ["秭归县", "远安县", "枝江市"],
                ["枣阳市", "老河口市", "谷城县"]
            ]
        ];
        aProvince.forEach(function (value, index) {
            $('#selProvince').append('<option>' + value + '</option>')
        })
        $('#selProvince').change(function () {
            var index_province = $(this).children('option:selected').index()
            var arr = aCity.filter((item, index) => index === index_province - 1)[0]
            $('#selCity>option:gt(0)').remove()
            $('#selCounty>option:gt(0)').remove()
       if(index_province !== 0) {    arr.forEach(function (value, index) {    $(
'#selCity').append('<option>' + value + '</option>')    })
        } $(
'#selCity').change(function () { var index_city = $(this).children('option:selected').index() var arr1 = aCounty.filter((item, index) => index === index_province - 1)[0] var arr2 = arr1.filter((item, index) => index === index_city - 1)[0] $('#selCounty>option:gt(0)').remove()
          if(index_city !== 0){   arr2.forEach(function (value, index) {   $(
'#selCounty').append('<option>' + value + '</option>')   })
          } }) }) })
</script> </html>
原文地址:https://www.cnblogs.com/Bob0411/p/10690617.html