选择省份、城市、区三级联动

最新推荐文章于 2023-04-13 16:55:51 发布

bugyellow_emo

最新推荐文章于 2023-04-13 16:55:51 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/bugyellow_emo/article/details/118369085

版权

<body>
    //先写出基本样式
    省份：<select name="" id="a">
        <option value="">————请选择————</option>
    </select>
    城市：<select name="" id="b">
        <option value="">————请选择————</option>
    </select>
    区：<select name="" id="c">
        <option value="">————请选择————</option>
    </select>
    <script>
        //如果数据太多看不清 可以在控制台打印方便查看
        //console.log(data)

        //a,b,c分别为省份，城市，区
        var a = document.getElementById('a')
        var b = document.getElementById('b')
        var c = document.getElementById('c')

        //首先把省份遍历进去  每个省份在一个option标签里面
        for(var i = 0; i < data.length; i++) {
            //创建option标签
            var option = document.createElement('option')
            //把省份的名字添加到option标签里面
            option.innerHTML = data[i].name
            //把option标签追加到下拉列表中
            a.appendChild(option)
        }

        // 选择省份把城市遍历进去
        // selectedIndex 获取当前点击省份下标
        var bin = null
        a.onchange = function() {
            //每次选择省份时让城市和区的下拉列表为默认值
            b.innerHTML = '<option>————请选择————</option>'
            c.innerHTML = '<option>————请选择————</option>'
            //bin为选中省份里的城市 -1是因为有一个默认的option标签
            bin = data[this.selectedIndex - 1].children
            for(var i = 0; i < bin.length; i++) {
                var option = document.createElement('option')
                //把城市的名字添加到option标签里面
                option.innerHTML = bin[i].name
                b.appendChild(option)
            }
        }

        //选择城市把区遍历进去
        b.onchange =function () {
            c.innerHTML = '<option>————请选择————</option>'
            //cin为选中城市里的区 -1是因为有一个默认的option标签
            var cin = bin[this.selectedIndex - 1].children
            for(var i = 0; i < cin.length; i++) {
                var option = document.createElement('option')
                option.innerHTML = cin[i].name
                c.appendChild(option)
            }
        }
    </script>
</body>

bugyellow_emo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择省份、城市、区三级联动

<body> //先写出基本样式省份：<select name="" id="a"> <option value="">————请选择————</option> </select> 城市：<select name="" id="b"> <option value="">————请选择————</option> </select&gt.
复制链接

扫一扫