原生js实现三级级联

最新推荐文章于 2022-06-23 09:01:40 发布

N_ora

最新推荐文章于 2022-06-23 09:01:40 发布

阅读量510

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_33359745/article/details/107404746

版权

思路：

接口
请求省级 type:0 市级 type：1，province：province 县：type：2 ，province：province，city：city
响应：省市县数据数组。
实现每个select的Menu类及render数据渲染方法，change方法
监听类中抛发的事件，渲染数据
总的：生成三个空select，给第一个select 传入数据，createSel时会抛发出数据，在html页面接收，并且根据数据判断是第几个select，然后请求数据并渲染后面的select

html

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>选择城市</title>
      <style>
            select {
   
                  height: 20px;
                  margin-right: 10px;
                  line-height: 20px;
                  width: 100px;
            }

            div {
   
                  position: absolute;
            }
      </style>
</head>

<body>
      <div></div>
      <script>
            class Menu {
   
                  constructor(parent, _data) {
   
                        this.data = _data;
                        this.menu = this.createSel(parent);
                  }
                  createSel(parent) {
   
                        if (this.menu) return this.menu;
                        let sel = document.createElement('select');
                        sel.self = this;
                        sel.addEventListener('change', this.changeHandler);
                        if (this.data) {
   
                              //如果有值，遍历就渲染option列表,因为第一次生成并不会传入值
                              this.data.forEach(element => {
   
                                    let opt = document.createElement('option');
                                    opt.value = element;
                                    opt.textContent = element;
                                    sel.appendChild(opt);
                              });
                        }
                        parent.appendChild(sel);
                        // 在每次创建新的sel时 抛发事件 或者在change时抛发事件
                        if (this.data) {
   
                              // 如果有数据，抛发，没有数据不执行
                              this.evt

最低0.47元/天解锁文章

N_ora

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现三级级联

思路：接口请求省级 type:0 市级 type：1，province：province 县：type：2 ，province：province，city：city响应：省市县数据数组。实现每个select的Menu类及render数据渲染方法，change方法监听类中抛发的事件，渲染数据总的：生成三个空select，给第一个select 传入数据，createSel时会抛发出数据，在html页面接收，并且根据数据判断是第几个select，然后请求数据并渲染后面的selecthtml
复制链接

扫一扫