原生js做三级联动

简介: 原生js做三级联动

html:

<!-- 省 -->
    <select name="" class="a">
      <option value="">--请输入--</option>
    </select>
    <!-- 市 -->
    <select name="" class="a">
      <option value="">--请输入--</option>
    </select>
    <!-- 县 -->
    <select name="" class="a">
      <option value="">--请输入--</option>
    </select>

css:

* {
      padding: 0;
      margin: 0;
    }
    .a {
      border-radius: 20px;
    }

js:

// 数据
      let data = [{
          "name": "河南省",
          "value":1,
          "child": [{
              "name": "郑州",
              "child": [{
                  "name": "金水区"
                },
                {
                  "name": "二七区"
                }
              ]
            },
            {
              "name": "新乡市",
              "child": [{
                  "name": "红旗区"
                },
                {
                  "name": "获嘉县"
                }
              ]
            }
          ]
        },
        {
          "name": "山西省",
          "value":2,
          "child": [{
              "name": "晋城",
              "child": [{
                  "name": "阳城县"
                },
                {
                  "name": "沁水县"
                }
              ]
            },
            {
              "name": "太原",
              "child": [{
                  "name": "晋源区"
                },
                {
                  "name": "万柏林区"
                }
              ]
            }
          ]
        }
      ]
      // 获取到class
      let arr = document.getElementsByClassName("a")[0];
      let arra = document.getElementsByClassName("a")[1];
      let arrb = document.getElementsByClassName("a")[2];
      let a;
      // for循环出省
      for (let i = 0; i < data.length; i++) {
        let shen = new Option(data[i].name);
        arr.appendChild(shen);
      }
      // 获取到里面的内容
      arr.onchange = function(){
        // 每次数据渲染之前长度初始化
        arra.options.length = 1;
        // 获取到arr的下标
        let index = arr.selectedIndex;
        // for循环出下标对应的值(index获取到的值为数组的值所以要减一)
      for( let i = 0; i < data[index-1].child.length; i++){
        // 创建一个子节点,输出里面的子元素第i个的name
        let yu = new Option(data[index-1].child[i].name);
        // 渲染到页面
        arra.appendChild(yu);
      }
      a = index;
      }
      arra.onchange = function(){
        arrb.options.length = 1;
        let indexs = arra.selectedIndex;
      for( let i = 0; i < data[a-1].child[indexs-1].child.length; i++){
        let th = new Option(data[a-1].child[indexs-1].child[i].name);
        arrb.appendChild(th);
      }
      }
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
44 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
44 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
42 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
5月前
|
NoSQL JavaScript 前端开发
JavaScript与数据库MongoDB的联动
JavaScript和MongoDB结合,构建Web应用的关键技术。MongoDB,作为NoSQL数据库,以其灵活性和高性能深受开发者喜爱。本文探讨两者的基本概念,如JavaScript在前端交互和后端数据处理的作用,MongoDB的文档存储和查询特性。通过Node.js和mongoose库,展示了连接数据库、定义数据模型及增删改查操作的代码示例。强调了性能优化(如索引、批量操作)和安全措施(如权限控制、数据加密)的重要性。最后,提供了一个简单的CRUD应用示例,涵盖Express和前端API调用。
58 0
|
5月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
36 0
|
6月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
112 0
|
7月前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
110 2