省市区三级联动(附加代码)

最新推荐文章于 2025-07-30 16:36:32 发布

杨大东

最新推荐文章于 2025-07-30 16:36:32 发布

阅读量394

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_45840519/article/details/144429270

写在开头

上期代码主要实现手风琴效果，开发久了很多功能都是通过框架组件库来完成，但是如果组件满足不了开发需求，还需要开发人员手动封装组件，专门出这样一期文章，通过原生js实现一些特定功能，功能也比较简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript，在前端中的作用，另外也培养下我们的代码思维，那我们本次就通过由简单到复杂循序渐进，后续专栏中我们会带领大家用前端实现视频网站中重磅推荐模块、图片放大镜、积分抽奖、拼图、无缝轮播图、图片瀑布流、读心术小游戏等等有趣的小功能，纯前端语言实现，都会陆续带给大家。

功能介绍

类似省市区三级联动选择效果，可参考Vant组件库 Area 省市区选择

页面创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <ul class="container">
        <li class="item">
            <div class="left">省份</div>
            <div class="right">
                <select name="province" id="province">
                    <option value="000">请选择</option>
                </select>
            </div>
        </li>
        <li class="item">
            <div class="left">城市</div>
            <div class="right">
                <select name="city" id="city">
                    <option value="000">请选择</option>
                </select>
            </div>
        </li>
        <li class="item">
            <div class="left">院校</div>
            <div class="right">
                <select name="school" id="school">
                    <option value="000">请选择</option>
                </select>
            </div>
        </li>
    </ul>
    <script src="../AllSchool.js"></script>
    <script src="./demo.js"></script>
</body>
</html>

样式创建

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
body{
    background-color: bisque;
}

.container {
    width: 300px;
    margin: 0 auto;
}
.item{
    width: 100%;
    height: 42px;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
}
.left{
    display: inline-block;
    height: 42px;
    line-height: 42px;
    margin: 0 10px;
    color:rgba(73, 74, 74, 0.514);
}
.left::after{
    content: '|';
    display: inline-block;
    color: rgba(73, 74, 74, 0.514);
    padding-left: 15px;
    font-weight: 500;
}
.right{
    display: inline-block;
    height: 42px;
    width: 210px;
    color: rgb(31, 31, 31);
}
select{
    width: 100%;
    height: 30px;
    /* 透明 */
    border-color: transparent;
}

逻辑实现

// 页面初始化

//获取操作dom
let provinceDom = document.getElementById('province');
let cityDom = document.getElementById('city');
let schoolDom = document.getElementById('school');

// 渲染省份列表
for (const prop in province) {
    if (Object.hasOwnProperty.call(province, prop)) {
        let optionDom = document.createElement('option')
        const element = province[prop];
        optionDom.value = prop;
        optionDom.innerText = element;
        provinceDom.appendChild(optionDom);
        
    }
}

// 省份变化的时候，获取省份编号

provinceDom.onchange = function(){
    // 每次选择先清空之前内容
    cityDom.innerText = '';
    // 获得省份编号
    let numPro = provinceDom.value;
    // 通过省标号，获取城市信息
    let citys = city[numPro]
    // 遍历渲染城市信息
    for (const cit in citys) {
        if (Object.hasOwnProperty.call(citys, cit)) {
            let options = document.createElement('option')
            const element = citys[cit];
            options.value = cit;
            options.innerText = element;
            cityDom.appendChild(options); 
        }
    }
    //默认值,选中城市后，学院及时展示出来
    let num = cityDom.value;//城市编号
    let univer = allschool[num]
    // 遍历
    for (let index = 0; index < univer.length; index++) {
        const element = univer[index];
        let options = document.createElement('option')
        options.innerText = element;
        schoolDom.appendChild(options);
    }

    
}

// 城市变化的时候，获取城市编号
cityDom.onchange = function () {
    // 每次选择先清空之前内容
    schoolDom.innerText = '';
    // 获得城市编号
    let numCity = cityDom.value;
    // 通过城市编号，获得学院信息
    let schools = allschool[numCity];
    // 遍历渲染院校信息
    for (const scho in schools) {
        if (Object.hasOwnProperty.call(schools, scho)) {
            const element = schools[scho];
            let optSchool = document.createElement('option')
            optSchool.value = scho;
            optSchool.innerText = element;
            schoolDom.appendChild(optSchool);
        }
    }
}