写个用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>

 

posted @ 2019-04-11 16:33  前方远在端点  阅读(366)  评论(0)  编辑  收藏  举报