省市区三级联动 (JS)

最新推荐文章于 2025-05-20 11:06:00 发布

水星记m

最新推荐文章于 2025-05-20 11:06:00 发布

阅读量610

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript高级文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_46075739/article/details/122406025

本文介绍了如何利用JavaScript实现省市区的三级联动效果，适用于前端开发中常见的地区选择功能，内容涉及Vue.js的使用。

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

使用js完成三级联动效果

(function () {//命名空间  代码块  块级作用域

    var provinceNode = document.getElementById('province'),
        cityNode = document.getElementById('city'),
        schoolNode = document.getElementById('school');

    //省会的获取
    var provinceStr = '';
    for (var i = 0; i < province.length; i++) {
        // province[i][1]
        // data-value 
        provinceStr += '<option value=' + province[i][0] + '>'
        + province[i][1] + '</option>';
    }
    provinceNode.innerHTML = provinceStr;

    //城市的获取---数组
    var cityArr = city[provinceNode.value];
    // console.log(cityArr);
    var cityStr = '';
    for (var i = 0; i < cityArr.length; i++) {
        // province[i][1]
        cityStr += '<option value=' + cityArr[i][0] + '>' +
    cityArr[i][1] + '</option>';
    }
    cityStr+= '<option>其他</option>';
    cityNode.innerHTML = cityStr;

    //院校的获取 ---数组
    var schoolArr = allschool[cityNode.value];
    var s