联级选择器（仿element-ui），不过我用的是jq写的！

最新推荐文章于 2024-09-05 15:53:15 发布
最新推荐文章于 2024-09-05 15:53:15 发布
阅读量3.3k 收藏 5
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36800701/article/details/80420212
版权

 

在做组件之前，一般我都是把HTML结构先写出来的，最终我们需要变成这样的结构

    <div class="cascader-menus">
        <ul class="menus">
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
        </ul>
        <ul class="menus">
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
        </ul>
        <ul class="menus">
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
        </ul>
    </div>                       

然后是样式：

/*这里采用浮动是为了让宽度自适应*/
    .cascader-menus{
        float: left;
        font-size: 0;
        border: 1px #ccc solid;
    }
    /*布局用的inline-block，并且溢出会有滚动条*/
    .cascader-menus .menus{
        display: inline-block;
        min-width: 160px;
        height: 204px;
        overflow-y: auto;
        border-right: 1px #ccc solid;
    }
    .cascader-menus .menus:last-child{
        border-right: none;
    }
    .cascader-menus .menus li{
        font-size: 14px;
        padding: 0 10px;
        line-height: 30px;
        height: 30px;
    }
    .cascader-menus .menus li:hover {
        cursor: pointer;
        background-color: #eee;
    }
    /*点击的时候需要加的样式*/
    .cascader-menus .menus li.active {
        background-color: #eee;
    }

数据结构（直接从element-ui复制的）：

var lists = [
    {
        value: 'zhinan',
        label: '指南',
        children: [
            {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                    value: 'yizhi',
                    label: '一致'
                }, {
                    value: 'fankui',
                    label: '反馈'
                }, {
                    value: 'xiaolv',
                    label: '效率'
                }, {
                    value: 'kekong',
                    label: '可控'
                }]
            },
            {
                value: 'daohang',
                label: '导航',
                children: [
                    {
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                    },
                    {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                    }
                ]
            }
        ]
    },
    {
        value: 'zujian',
        label: '组件',
        children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
                value: 'layout',
                label: 'Layout 布局'
            }, {
                value: 'color',
                label: 'Color 色彩'
            }, {
                value: 'typography',
                label: 'Typography 字体'
            }, {
                value: 'icon',
                label: 'Icon 图标'
            }, {
                value: 'button',
                label: 'Button 按钮'
            }]
        }, {
            value: 'form',
            label: 'Form',
            children: [{
                value: 'radio',
                label: 'Radio 单选框'
            }, {
                value: 'checkbox',
                label: 'Checkbox 多选框'
            }, {
                value: 'input',
                label: 'Input 输入框'
            }, {
                value: 'input-number',
                label: 'InputNumber 计数器'
            }, {
                value: 'select',
                label: 'Select 选择器'
            }, {
                value: 'cascader',
                label: 'Cascader 级联选择器'
            }, {
                value: 'switch',
                label: 'Switch 开关'
            }, {
                value: 'slider',
                label: 'Slider 滑块'
            }, {
                value: 'time-picker',
                label: 'TimePicker 时间选择器'
            }, {
                value: 'date-picker',
                label: 'DatePicker 日期选择器'
            }, {
                value: 'datetime-picker',
                label: 'DateTimePicker 日期时间选择器'
            }, {
                value: 'upload',
                label: 'Upload 上传'
            }, {
                value: 'rate',
                label: 'Rate 评分'
            }, {
                value: 'form',
                label: 'Form 表单'
            }]
        }, {
            value: 'data',
            label: 'Data',
            children: [{
                value: 'table',
                label: 'Table 表格'
            }, {
                value: 'tag',
                label: 'Tag 标签'
            }, {
                value: 'progress',
                label: 'Progress 进度条'
            }, {
                value: 'tree',
                label: 'Tree 树形控件'
            }, {
                value: 'pagination',
                label: 'Pagination 分页'
            }, {
                value: 'badge',
                label: 'Badge 标记'
            }]
        }, {
            value: 'notice',
            label: 'Notice',
            children: [{
                value: 'alert',
                label: 'Alert 警告'
            }, {
                value: 'loading',
                label: 'Loading 加载'
            }, {
                value: 'message',
                label: 'Message 消息提示'
            }, {
                value: 'message-box',
                label: 'MessageBox 弹框'
            }, {
                value: 'notification',
                label: 'Notification 通知'
            }]
        }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
                value: 'menu',
                label: 'NavMenu 导航菜单'
            }, {
                value: 'tabs',
                label: 'Tabs 标签页'
            }, {
                value: 'breadcrumb',
                label: 'Breadcrumb 面包屑'
            }, {
                value: 'dropdown',
                label: 'Dropdown 下拉菜单'
            }, {
                value: 'steps',
                label: 'Steps 步骤条'
            }]
        }, {
            value: 'others',
            label: 'Others',
            children: [{
                value: 'dialog',
                label: 'Dialog 对话框'
            }, {
                value: 'tooltip',
                label: 'Tooltip 文字提示'
            }, {
                value: 'popover',
                label: 'Popover 弹出框'
            }, {
                value: 'card',
                label: 'Card 卡片'
            }, {
                value: 'carousel',
                label: 'Carousel 走马灯'
            }, {
                value: 'collapse',
                label: 'Collapse 折叠面板'
            }]
        }]
    },
    {
        value: 'ziyuan',
        label: '资源',
        children: [{
            value: 'axure',
            label: 'Axure Components'
        }, {
            value: 'sketch',
            label: 'Sketch Templates'
        }, {
            value: 'jiaohu',
            label: '组件交互文档'
        }]
    },
    {"value": 1, label: 'xxx'},
]

然后是JS:

//构造函数
	function Cascader(id,data,fn){
		//把创建好的“联级选择器”插入到哪个元素内
		this.$box = $("#"+id);
		//data: 是要填充的数据
		this.init(data);
		
		//对外提供的接口函数
		this.clickHandle = fn || function(){};
		
		//最外层的容器,后期需要把createEl()方法创建的内容都插入到这里面的
		this.$wrap = null;
	}
	
	Cascader.prototype = {
		constructor: Cascader,
		init: function(data){
			var This = this;
			this.$wrap = $("<div class='cascader-menus'></div>")
			//创建里面的元素
			this.createEl(data,function($ul){
				This.$wrap.append($ul);
				This.$box.append(This.$wrap)
			});
			console.log(data)
		},
		createEl: function(data,fn) {
			var This = this;
			//创建完成以后回调函数
			var fn = fn || function(){};
			var $ul = $("<ul class='menus'></ul>");
			
			//创建li，并把li插入到ul中
			for (var i=0;i<data.length;i++) {
				var $li = $("<li>"+ data[i].label +"</li>");
				//给每一个Li加点击事件，点击以后显示子菜单,这里最好采用闭包的形式，不然i传递不进去，当然也可以用es6的let（不过这里没有bable，浏览器会不支持let的，在vue-cli中的话就没问题了）
				(function(i){
					$li.click(function(){
						$(this).addClass('active').siblings().removeClass('active');
						//先需要清除掉后面所有的菜单
						$ul.nextAll().remove();
						if (data[i].children && data[i].children.length) {
							//创建子菜单
							This.createEl(data[i].children,function(ul){
								//把创建好的子菜单插入到上一个菜单的后面
								$ul.after(ul);
							});
						}
						//对外提供的点击接口函数，并把数据给传递出去
						This.clickHandle(data[i]);
					})
				})(i)
				$ul.append($li);
			}
			
			//创建完成以后回调函数
			fn($ul)
		}
	}

使用：

在html中先写一个div

<div id="box"></div>
//调用
		var c1 = new Cascader("box",lists,function(mes){
			console.log(mes)
		});

 

导乐符
关注
专栏目录
vue项目中所使用的element-UI / echarts
Stephy_Yy
12-15 2821
1.登录页面 < el-form > 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 pro...
【element ui】问题集锦
Beam
03-29 2164
现象： 在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。 解决： 官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。 监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。 代码： watch: { '$attrs.data': { handler (val) { this.$refs.com
jquery cascader 级联选择器_基于react+ts写了个级联选择器——react-cascader-transfer
weixin_39960793的博客
11-28 396
原文：基于react+ts写了个级联选择器——react-cascader-transfer · Issue #45 · lizhongzhen11/lizz-blog​github.com正文：npm地址：react-cascader-transfergithub：lizhongzhen11/react-cascader-transfer效果图：开发背景最近做的项目中涉及到地区选中以及项目及项目...
jq写的模拟elementui的select
05-07
jq写的模拟elementui的select，直接原生的可以add_el_select(obj)；加一行代码就可以，设置值使用 el_set_vlaue(obj)
jQuery选择器 之 基本选择器
最新发布
听海边涛声
09-05 704
jQuery选择器 之 基本选择器
JQuery仿elementui级联控件
onlyformyself的博客
01-29 1264
elementui太香了，但是基于vue.js… 没法了，jq党只能自己来了 以下代码即拿即用，别忘推荐！！！ HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>级联控件
javascript：Cascader.js级联选择器
u013938578的博客
01-25 877
Cascader.js级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。7.1 参数：options {Object}选项说明类型必填elements用于实例化控件的select元素集合Array是data数据源Array是initValue初始化的值，可以是 value，也可以是 labelArray否占位符，设置索引对应的 select 元素的第一项 option，默认都是请选择Array否7.2 方法：setData设置数据源。
select框带搜索功能jq插件
ICode联盟
02-16 328
下载地址 一款下拉框js插件，select框带搜索功能jq插件。 dd:
js,JQuery实现,带筛选,搜索的select
weixin_30396699的博客
05-03 617
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网上找了个插件，但是不好用</title> <script src="jquery.js" charset="utf-8"></script&g...
jquery-1.11.0+jquery-UI-1.10.4
03-05
在实际项目中，为了充分利用这两个库，开发者需要了解它们的API文档，学习如何结合使用选择器、事件、动画、Ajax以及UI组件。同时，注意合理优化，避免不必要的DOM操作和过度依赖jQuery UI的默认样式，以提高性能并...
2021省市区三级联动选择器
weixin_44690108的博客
04-26 980
省市区三级联动选择器 一个仿elementui多级级联插件即下即用不依赖任何ui框架 插件来源 代码部分 html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>省市区选择</title> <!--改成自己的地址-->
cascaderjs级联选择器
08-12
级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
JQ JS javascript bootstrap 带搜索 下拉框 select
04-18
JQ JS javascript bootstrap 带搜索 下拉框 select
jQuery仿elementui多级省市县地区联动选择特效带地区数据/数组形式
01-08
jQuery仿elementui多级省市县地区联动选择特效带地区数据/数组形式
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
项目模拟所需
仿element-ui的jquery datepickerRange
09-10
原github地址：https://github.com/qiuyaofan/datepicker 在线demo：https://qiuyaofan.github.io/datepicker/ 喜欢请在github star，谢谢
不使用Element UI库借助jQuery的库也可以实现‘搜索下拉框’的功能噢
weixin_47024018的博客
02-17 676
搜索下拉框介绍 以CSDN下拉菜单反馈性关键词是用户在搜索时与搜索引擎的第一步互动，在互动过程中，搜索引擎的反馈关键词不断调整来满足用户的个性需求! 下面也可以通过jQuery的库进行实现，后台仅需要提供一个查询的接口给我们前端即可完成，前端也不需要自己再重写令人烦心的样式。如果后台返回的数据没有分页或者固定多少条，我们需要拿到数据后截取10条-15条进行展示！ 使用背景 在一个移动端项目需要做一个搜索下拉框的功能，该技术选型是jQuery，而并非Vue，这样有些Vue封装好的第三方库就无法实现了，我这边找
jQuery 实现页面搜索功能----项目实战
愿你走过半生，归来任是少年。
07-10 2760
因为前端设计页面需要实现一个页面内搜索实现“Search Suggestion”效果的功能。本功能不适用于检索数据集过大的检索。 实现思路是通过JQuery的获取div节点，对关键字匹配成功之后调后台接口，跳到对应的页面，很实用的功能，能帮助后台开发解决很大的问题。 页面布局最规范的写法如下—-php后台 ...
jq实现 element-ui左侧导航的功能
的博客
03-06 312
html <ul class="mainMenu"> <li class="menuItem"> <a href="media.html"> <img src="images/media_01.png" class="unSelected"> <img src="images/media_02.png" class="selected"> <span>媒体组</span> </a>
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值