JS实现省市区三级联动的操作理解

最新推荐文章于 2024-09-27 11:02:30 发布

表演者7号

最新推荐文章于 2024-09-27 11:02:30 发布

阅读量451

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/biaoyan01/article/details/109863377

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS实现三级联动的操作理解

上课的时候老师讲到三级联动，问到什么是联动，我就想到了中野联动，野辅联动，当然懂得人都懂是什么，这边还是说回三级联动，用地区来说其实差不多就是首先我们要选省，有了省我们可以选择市，有了市才可以选择区，这个时候就涉及到最重要一点就是数据的处理，当我们处理好数据后就会发现写起来比较简单。
一般我们从数据库或者别人给到数据都是一个数组的格式，可能是这样的
var prolist= [{…}, {…}]
然后我们就要对数组里的对象进行遍历和解构拿到有用的值。这里用reduce和forEach都可以，当然还有其它方法，
prolist.forEach(({ name }) => {
html += <option value="${name}">${name}</option>
});
这里就可以拿到省了，只需要把值赋给 oPro.innerHTML = html;就可看到省，然后我们用点击事件var proName = this.value,然后用数组的过滤fi’lter拿到我们的市的数据
var proobj = prolist.filter(function (item) {
return item.name === proName
})[0];
当我们拿到数据之后，还是进行类似的方法进行遍历及解构，
if (proobj) {
list = proobj.children;
list.forEach(({ name }) => {
html += <option value="${name}">${name}</option>
});}
这里就可以拿到市了，只需要把值赋给 oCity.innerHTML = html;就可看到市，还是用点击事件var oCityName = this.value，然后用数据的过滤filter拿到区的数据，
var cityobj = list.filter(function (item) {
return item.name === cityName})[0]
拿到数据之后还是依葫芦画瓢，进行遍历及解构，
if (cityobj) {
list = cityobj.children;
list.forEach(({ name }) => {
html += <option value="${name}">${name}</option>
});}
然后进行最后的三级赋值就可以，oTow.innerHTML = html;
以下源代码，这边的数据写死了，数据库的数据拿出来差不多，这边调接口的数据太长了！

<body>
    <select id="pro">

        <option value="">请选择省</option>

    </select>

    <select  id="city">

        <option value="">请选择市</option>

    </select>

    <select  id="tow">

        <option value="">请选择区</option>

    </select>

</body>

<script>

    var oPro = document.querySelector("#pro");

    var oCity = document.querySelector("#city");

    var oTow = document.querySelector("#tow")
    var prolist = [{
        name: "湖北",
        children: [{
            name: "武汉",
            children: [{
                name: "江夏区"
            },
            {
                name: "江夏区"
            }
            ]
        },
        {
            name: "襄阳",
            children: [{
                name: "襄城区"
            },
            {
                name: "樊城区"
            }
            ]
        }

        ]
    },
    {
        name: "湖南",
        children: [{
            name: "长沙",
            children: [{
                name: "岳麓区"
            },
            {
                name: "qq区"
            }
            ]
        },
        {
            name: "岳阳",
            children: [{
                name: "岳麓区"
            },
            {
                name: "qq区"
            }
            ]
        }
        ]
    }]

    var html = `<option value="">请选择省</option>`
    prolist.forEach(({ name }) => {
        html += `<option value="${name}">${name}</option>`
    });
    oPro.innerHTML = html;
    var list = [];
    oPro.onchange = function () {
        var proName = this.value;
        var html = `<option value="">请选择市</option>`

        var proobj = prolist.filter(function (item) {
            return item.name === proName
        })[0];
        var list = [];
        if (proobj) {
            list = proobj.children;
            list.forEach(({ name }) => {
                html += `<option value="${name}">${name}</option>`
            });
        }
        oCity.innerHTML = html;
        oCity.onchange = function () {
            console.log(list)
            var cityName = this.value
            var html = `<option value="">请选择区</option>`
            var cityobj = list.filter(function (item) {
                return item.name === cityName
            }
            )[0];
            if (cityobj) {
                list = cityobj.children;
                list.forEach(({ name }) => {

                    html += `<option value="${name}">${name}</option>`
                });
            }
            oTow.innerHTML = html;
        }
    }


</script>