devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jq封装树形下拉选择框组件_jquery select实现树形下拉框

作者：小小林熬夜学编程 | 2024-02-15 13:53:22

赞

踩

jquery select实现树形下拉框

在这里插入图片描述
目前只是做了单选功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.one-tree-select {
			width: 240px;
			position: relative;
			font-size: 14px;
			color: #606266;
		}

		.one-selected {
			background-color: #fff;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			color: #606266;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: none;
			padding: 0 15px;
			transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
			width: 100%;
			box-sizing: border-box;
		}

		.select-item-box {
			position: absolute;
			top: 100%;
			width: 100%;
			height: 200px;
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			box-sizing: border-box;
			margin: 5px 0px;
			overflow: hidden;
			overflow-y: scroll;
		}

		.two-tree-select {
			cursor: pointer;
			/* margin-left: 15px; */
			box-sizing: border-box;
		}

		.select-item {
			line-height: 34px;
			position: relative;
			z-index: 6;
		}

		.select-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
		}

		.select-item:hover {
			background: #f5f7fa;
		}

		.three-tree-select {
			height: 34px;
			/* margin-left: 15px; */
			box-sizing: border-box;
		}

		.two-tree-selected-box {
			display: flex;
			align-items: center;
		}

		.two-tree-selected {
			flex: 1;
			width: 180px;
		}

		.three-tree-selected-box {
			display: flex;
			align-items: center;
		}
		.tree-selected{
			margin-left: 15px;
			
		}
		.three-tree-selected {
			flex: 1;
			width: 180px;
			margin-left: 30px;
		}
		
		.select-change{
			margin-right: 10px;
			transition: transform .2s;
			transform: rotate(90deg);
		}
		.select-change-open{
			transform: rotate(0deg);
		}
		.select-item-box::-webkit-scrollbar {
		    width: 5px;
		 }
		 .select-item-box::-webkit-scrollbar-thumb {
		    border-radius: 10px;
		    -webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
		    background: rgba(144,147,153,.3);/*颜色*/
		  }
		 .select-item-box::-webkit-scrollbar-track {
		    -webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
		    background: #ffffff;
		 }

	</style>
	<body>
		<div class="one-tree-select">
			<div class="one-selected"></div>
			<div class="select-item-box"></div>
		</div>
	</body>
	<script src="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
	<script src="./js/jquery.js"></script>
	<script>
		$(function(){
			renderTree()
		})
		var dataList = [{
				"item_name": "推荐",
				"Id": "1",
				"parent_id": "0",
				"sort": 9,
				"depth": 1,
				"children": [{
						"item_name": "推荐课程",
						"Id": "8",
						"parent_id": "1",
						"sort": 8,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "短视频",
						"Id": "9",
						"parent_id": "1",
						"sort": 7,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "最热",
						"Id": "10",
						"parent_id": "1",
						"sort": 5,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "最新",
						"Id": "11",
						"parent_id": "1",
						"sort": 4,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "音频",
						"Id": "12",
						"parent_id": "1",
						"sort": 3,
						"depth": 2,
						"children": []
					}
				]
			},
			{
				"item_name": "免费课程",
				"Id": "2",
				"parent_id": "0",
				"sort": 7,
				"depth": 1,
				"children": [{
						"item_name": "免费",
						"Id": "21",
						"parent_id": "2",
						"sort": 1,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "1",
						"Id": "22",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "2",
						"Id": "23",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "3",
						"Id": "24",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "4",
						"Id": "25",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "5",
						"Id": "26",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "777777",
						"Id": "27",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					},
					{
						"item_name": "付费课程付费",
						"Id": "28",
						"parent_id": "2",
						"sort": 0,
						"depth": 2,
						"children": []
					}
				]
			},
			{
				"item_name": "经营账",
				"Id": "3",
				"parent_id": "0",
				"sort": 6,
				"depth": 1,
				"children": []
			},
			{
				"item_name": "云学堂",
				"Id": "4",
				"parent_id": "0",
				"sort": 5,
				"depth": 1,
				"children": [{
					"item_name": "云学堂分类1",
					"Id": "29",
					"parent_id": "4",
					"sort": 0,
					"depth": 2,
					"children": []
				}]
			},
			{
				"item_name": "进阶课",
				"Id": "5",
				"parent_id": "0",
				"sort": 4,
				"depth": 1,
				"children": []
			},
			{
				"item_name": "音频",
				"Id": "6",
				"parent_id": "0",
				"sort": 3,
				"depth": 1,
				"children": [{
					"item_name": "测试音频2",
					"Id": "20",
					"parent_id": "6",
					"sort": 2,
					"depth": 2,
					"children": []
				}]
			}
		]
		function renderTree(){
			console.log(1)
			console.log(dataList[0].item_name)
			let tHtml = "";//头部
			for(let i in dataList){
				
				if(dataList[i].children.length>0){
					tHtml +=`<div class="two-tree-select">
							<div class="two-tree-selected-box select-item" id="tree${dataList[i].Id}">
								<div class="two-tree-selected tree-selected">${dataList[i].item_name}</div>
								<div class="select-change"> > </div>
							</div></div>`
				}else{
					tHtml +=`<div class="two-tree-select">
							<div class="two-tree-selected-box select-item" id="tree${dataList[i].Id}">
								<div class="two-tree-selected tree-selected">${dataList[i].item_name}</div>
							</div></div>`
				}
			}
			$(".select-item-box").html(tHtml);//渲染项目头部
			for(let i in dataList){
				let zHtml = "";//第二级
				if(dataList[i].children.length>0){
					for(let j in dataList[i].children){
						zHtml += `<div class="three-tree-selected-box select-item"><div class="three-tree-selected tree-selected">${dataList[i].children[j].item_name}</div></div>`
					}
				}
				$("#tree"+dataList[i].Id).after(zHtml);
			}
		}
		//展开 收缩下拉框
		$(document).on("click", ".one-tree-select", function () {
		        $(this).find('.select-item-box').toggle()
		})
		//禁止触发父级事件
		$(document).on("click", ".select-item-box", function (e) {
		        e.stopPropagation()
		})
		//点击下拉框 选中该下拉框的值
		$(document).on("click", ".select-item", function (e) {
		        e.stopPropagation()
		        let text = $(this).find('.tree-selected').text()
		        $('.one-selected').text(text)
		})
		//点击展开符 隐藏 展开子级
		$(document).on("click", ".select-change", function (e) {
		        e.stopPropagation()
		        $(this).parents('.two-tree-selected-box').nextAll('.three-tree-selected-box').toggle()
				if($(this).hasClass("select-change-open")){
					$(this).removeClass("select-change-open");
				} else{
					 $(this).addClass("select-change-open")
				}
		})		
	</script>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/85014
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号