多级联动select_option,(还有个别bug未解决,不建议使用不限量层级联动)

最新推荐文章于 2022-01-19 09:40:05 发布

hjy170314

最新推荐文章于 2022-01-19 09:40:05 发布

阅读量548

点赞数

分类专栏：前端知识文章标签： javascript jquery vue.js css3 html

本文链接：https://blog.csdn.net/hjy170314/article/details/106330494

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

多级联动,在使用报表的时候经常使用到,比如说三级联动等等,三级联动相对来说是比较简单的联动,
只需要考虑三个select标签之间的联系,以及他们的数据之间的联系就可以了,
但有一些联动是不限定数量的,也就是可以手动添加和删除 select标签
此时我在开发的过程中就遇到问题了,每个新加的select的数据,以及我触发每个一个select标签的option,
其他的select标签不应该有影响,
一开始开发的适合我这里犯了一个很大的错误,我将所有的一级联动使用了同一个数组,二级联动三级联动同理,
结果发现,不管我触发哪一个一级联动,所有的二级联动都跟着触发,这是一个非常致命的问题
最后我使用的动态数组的形式,将每一次三级联动的数组给一个不一样的名称,值是一样的,名称不一样.这样在我触发其他的select的时候,只会影响当前的三级联动

还有一个问题是删除select标签, 当我删除非首尾节点的select标签的时候,可以删除指定位置的select标签,
但是删除的这个标签如果选中了值再删除,这个值就会掉下来,到下一个select标签中
这里清除option的方式不适用 empty().这会使得下面的标签都无法经常运行,也无法直接修改值未空,这里怎么操作,我暂时还不知道,如若有知道的大神,请评论告诉我一下,我修改完成代码

还有一个问题是获取值的时候,我是直接获取了一级联动的,二级联动,三级联动的值,只对这三个值进行处理,没有对所有的组(一个三级联动为一组)的值进行分类,所以这里的获取值也是有问题的,问题就是我选择了当前组的三级联动的三个值之后我再去选择另一个三级联动的值,如果选择第二组的时候是选了一个第三级或者第二级等等,获取的值只会替换掉其中的一个值,所以需要你另选择其他组的时候,从头点击一遍三级联动,不然值的错误的
下面是代码
需要引入jquery.js 和vue.js

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="selectComponent.css" />
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body >
		<div id="app">
			<div @click="addElemt()">添加联动</div>
			<div class="addSelectCont" v-for="(item,index) in addSelectArr " :key="index">
				<div v-if="item.type != 'simple'">
					<select class="headSelect" name="">
						<option v-for="(item,index) in menuArr" :key="index" :value="item.value">{{item.value}}</option>
						
					</select>
					<div class="headBtn" @click="simpleAdd()">简单联动</div>
					<div class="headBtn"  @click="complexAdd()">复杂联动</div>
				</div>
				
				<div class="addSelectItem">
					<select class="headSelect contSelect" 
						@click="tapSelect(item.id,keys,index)" 
						@change="selectItem($event)" 
						v-for="(selectItems,keys) in item['addSelectList'+item.id]"  :key="keys"
						:name="item.id +'-'+ keys " 
						
					>
						<option disabled="disabled" selected="selected"></option>
						<option v-for="(items,ind) in selectItems"  :key="ind" >{{items.value}}</option>
					</select>
					<div class="del" @click="delectAdd(index)">删除</div>
					
				</div>
			</div>
			<div>	
				选中的值
				{{selectValue[0]}}
				{{selectValue[1]}}
				{{selectValue[2]}}
			</div>
		</div>
	</body>
</html>

js部分


	var dataTwo = [{id:1, value:'第二层01' , pidval: '第一层01'},{id:2, value:'第二层02' , pidval: '第一层01'},{id:1, value:'第二层03' , pidval: '第一层02'},{id:2, value:'第二层04' , pidval: '第一层02'},{id:1, value:'第二层05' , pidval: '第一层03'}]
	
	var dataThree = [{id:1, value:'第三层01' , pidval: '第二层01'},{id:2, value:'第三层02' , pidval: '第二层01'},{id:1, value:'第三层03' , pidval: '第二层02'},{id:2, value:'第三层04' , pidval: '第二层02'},{id:3, value:'第三层05' , pidval: "第二层01"}]
	
	var vm = new Vue({
		el:'#app',
		data:{
			menuArr : [{id:0,value: 'many'},{id:1,value:"some"},{id:2,value:"little"}],
			showSelect:false,
			
			addSelectArr:[],
			selectArrInd:0,   // 哪一行
			selectItemInd:0, //哪一个select
			currentArrIndx:0,
			selectValue:[],		//选择的内容
			selectVal:''
		},
		methods:{
			addElemt(){
				if(!this.showSelect){    //每次刷新只允许点击一次
					this.selectValue = []
					let arrInd = this.addSelectArr.length
					let addSelectList =  "addSelectList"+arrInd
					let data = {id:arrInd, type : "complex",arr:addSelectList ,[addSelectList]:[[{id:1, value:'第一层01'},{id:2, value:'第一层02'},{id:3, value:'第一层03'},{id:4, value:'第一层04'},{id:5, value:'第一层05'}]] }
					this.addSelectArr.push(data)
				}else{
					return
				}
					
				this.showSelect = true
			},
		
			simpleAdd(){
				this.selectValue = []
				let arrInd = this.addSelectArr.length
				let addSelectList =  "addSelectList"+arrInd
				
				let data = {id:arrInd, type:"simple",arr:addSelectList ,[addSelectList]:[[{id:1, value:'第一层01'},{id:2, value:'第一层02'},{id:3, value:'第一层03'},{id:4, value:'第一层04'},{id:5, value:'第一层05'}]] }
				
				this.addSelectArr.push(data)
				
			},
			complexAdd(){
				this.selectValue = []
				let arrInd = this.addSelectArr.length
				let addSelectList =  "addSelectList"+arrInd
				let data = {id:arrInd, type : "complex",arr:addSelectList ,[addSelectList]:[[{id:1, value:'第一层01'},{id:2, value:'第一层02'},{id:3, value:'第一层03'},{id:4, value:'第一层04'},{id:5, value:'第一层05'}]] }
				this.addSelectArr.push(data)
			},
			delectAdd(e){
				this.selectValue = []
				this.selectItemInd = 0
				if(e>-1){
					this.addSelectArr.splice(e,1)
				}
				this.addSelectArr = this.addSelectArr
			},
			tapSelect(row,col,arr){
				this.selectArrInd = row
				this.selectItemInd = col
				this.currentArrIndx = arr
				console.log(row,col,arr)
			},
			selectItem(e){
				let val = e.target.value
				let name = e.target.name
				let arrIndx = this.currentArrIndx
				let level = this.selectArrInd
				let selInd = this.selectItemInd
				let newArr = this.addSelectArr[arrIndx]
				console.log(this.selectValue)
				
				if(this.selectItemInd < 2){  //只允许三级联动 
					if(name == level + '-' + selInd){
						if(selInd == 0){    //第二个select
							this.selectValue.splice(0,1,val)
							var nextSelect = dataTwo
							newArr['addSelectList'+level].splice( this.selectItemInd + 1, 1, nextSelect)
							
						}else if(selInd == 1){ 	 //第三个select
							this.selectValue.splice(1,1,val)
							var nextSelect = dataThree
							newArr['addSelectList'+level].splice( this.selectItemInd + 1, 1, nextSelect)
						}
						
					}
					
				}else{
					this.selectValue.splice(2,1,val)
				}
			}
			
		},
		
	
	})

css部分

select{
	border-color: #d9d9d9;
	border-radius: 4px;
	padding:5px 10px;
}
.headBtn{
	padding: 5px 10px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	display: inline-block;
	font-size: 16px;
}
.headBtn:hover,.del:hover{
	cursor: pointer;
}
.contSelect{
	width: 200px;
	margin: 10px 0;
}
.selectCont,.addSelectItem{
	display: flex;
	align-items: center;
}

此代码还有很多不足,待完善…

hjy170314

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多级联动select_option,(还有个别bug未解决,不建议使用不限量层级联动)

多级联动,在使用报表的时候经常使用到,比如说三级联动等等,三级联动相对来说是比较简单的联动,只需要考虑三个select标签之间的联系,以及他们的数据之间的联系就可以了,但有一些联动是不限定数量的,也就是可以手动添加和删除 select标签此时我在开发的过程中就遇到问题了,每个新加的select的数据,以及我触发每个一个select标签的option,其他的select标签不应该有影响,一开始开发的适合我这里犯了一个很大的错误,我将所有的一级联动使用了同一个数组,二级联动三级联动同理,结果发现,不
复制链接

扫一扫