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

最新推荐文章于 2025-06-03 15:02:33 发布

原创最新推荐文章于 2025-06-03 15:02:33 发布 · 251 阅读

CC 4.0 BY-SA版权

本文介绍了一种基于HTML和JavaScript实现的级联下拉框功能。通过将省份、城市和区的数据逐级加载到对应的下拉框中，使得用户能够便捷地进行地理位置的选择。当用户选择某个省份时，相应的城市列表会自动更新；同样地，选择某个城市后，对应的区列表也会随之更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>