基于selectBox实现多级联动的模拟下拉框–SelectBoxMulti

之前有写过一个模拟select框的功能插件,当时也只是支持一个单独的select,但是平时,我们经常使用到的一个功能,就是需要多个select的联动效果,正好工作中也需要该功能,于是基于之前单个selectBox的方法,实现该插件,多个联动的selectBox的插件,我这里命名为SelectBoxMulti插件。

概述

本插件是基于selectBox插件实现的,需要的一些参数与传入的控制属性的命名等,都是和selectBox是相同的,如果只是拿来使用的话,那么可以直接按照本文中的示例使用,如果想要帮忙完善下代码的话,请先看下之前关于selectBox的介绍:selectBox模拟select元素-插件

示例

最近在写的一些插件,都是基于构造函数在实现的,所以本插件也是以构造函数的形式实现的。

直接看示例吧,支持多种实例化的方法。

在进行实例化之前,先看看HTML部分的布局结构:

CSS部分代码:

			
.selectBox{
	display:none;
	position: absolute;
	z-index: 2;
	list-style: none;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0px;
	margin:0px;
	text-align: left;
	border: 1px solid rgb(170, 170, 170);
}
.selectBox .selectBoxItem{
	list-style: none;
	padding: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(204, 204, 204);
	cursor: pointer;
	background-color: rgb(255, 255, 255);
}

.mutliSelectInput{
	width:150px;
}
			
		

HTML部分代码:

				
<input type = "text" class = "mutliSelectInput" id = "testSelectBox1" name = "selectBox" data-name = "selectBoxName1" data-value = "4" data-url = "ajax/selectBox.php"/>
<input type = "text" class = "mutliSelectInput" id = "testSelectBox2" name = "selectBox" data-name = "selectBoxName2" data-value = "4" data-url = "ajax/selectBox.php"/>
<input type = "text" class = "mutliSelectInput" id = "testSelectBox3" name = "selectBox" data-name = "selectBoxName3" data-value = "4" data-url = "ajax/selectBox.php"/>
<div style = "margin-top:10px;">
	<input type = "button" id = "apply" value = "初始化SelectBoxMulti插件"/>
</div>
				
			

这里的HTML结构,也可以自己初始化隐藏的input框和ul模拟下拉框的,这里为了节省时间,所以只给出最简单的HTML结构,隐藏的input框和ul下拉框,由在实例化的时候,自行生成。

OK,下面看JS进行实例化:

1:最简单也是最直接的实例化方法:

				
$("#apply").on("click",function(){
	//点击apply按钮时,初始化
	var SelectBoxMulti = new extendjQ.SelectBoxMulti({
		arr:[{
			obj:$("#testSelectBox1")
			//该部分,可以支持的属性和selectBox插件中支持的完全一样
			//这里为了简单,省略其他属性,
			//有兴趣的可以直接在selectBox插件中,查看更多详情
		},{
			obj:$("#testSelectBox2"),
			url:""
		},{
			obj:$("#testSelectBox3")
		}],
		data:[{name:"陆家嘴",value:"1"},{name:"人民广场",value:"2"},{name:"南京东路",value:"3"},{name:"南京西路",value:"4"},{name:"张江高科",value:"5"},{name:"世纪大道",value:"6"},{name:"世纪公园",value:"7"},{name:"金科路",value:"8"},{name:"张南路",value:"9"}],
		//此时对象中的属性,都和selectBox支持的属性相同,
		//但是有一点点区别的是,此时的data属性,只是为了初始化第一个
		//select框的下拉选项中的内容,其余下拉框的内容,
		//根据前面select的选项,进行ajax获取
		parentClass:"selectBox",
		childClass:"selectBoxItem",
		dataFn:function(){
			return "asdasd=asda";
		}
		//这三个属性,用于扩展,class用于实现自定义样式的selectBox下拉框
		//dataFn用于,当ajax获取数据时,需要的页面中其他的提交数据
	});
});
				
			

注意一点:url属性是必须要包含的,可以放在arr数组中的每一个对象中,这个url的级别是最高的,也可以放在inputdata-url属性中,当没有显示的在options中输入时,就会去这里查找data-url的值,如果有该值,就使用该值。

如果上述两者都没有,那么就去查找和arr数组同级的属性中,是否存在url,如果有,则使用该url作为ajax的提交地址,如果这个时候,依然没有,那么失败~~~

demo查看地址

2:懒人方法:

因为很多时候,联动的框,url相同,样式也相同,所以,这个时候,使用id作为选择器,就有些不太好了,所以,在是吸纳该插件时,也考虑到了使用类似class作为标示符,进行选择:

				
$("#apply").on("click",function(){
	//点击apply按钮时,初始化
	var SelectBoxMulti = new extendjQ.SelectBoxMulti({
		arr:[],
		obj:$(".mutliSelectInput"),
		//obj一系列的input框,会按照其所在顺序进行联动
		data:[{name:"陆家嘴",value:"1"},{name:"人民广场",value:"2"},{name:"南京东路",value:"3"},{name:"南京西路",value:"4"},{name:"张江高科",value:"5"},{name:"世纪大道",value:"6"},{name:"世纪公园",value:"7"},{name:"金科路",value:"8"},{name:"张南路",value:"9"}],
		parentClass:"selectBox",
		childClass:"selectBoxItem",
		dataFn:function(){
			return "asdasd=asda";
		}
	});
});
				
			

demo查看地址

甚至,也可以arrobj都有值,那么objinput框,会接在arr的数组之后,进行联动。

并且,根据传入的属性的差别,可以有不同的差别,举个例子:我希望各个下拉框,有不同的宽度,那么我可以把进行如下的实例化:

				
$("#apply").on("click",function(){
			//点击apply按钮时,初始化
			var mutliSelectInput = $(".mutliSelectInput");
			
			new extendjQ.SelectBoxMulti({
				arr:[{
					obj:mutliSelectInput.eq(0),
					width:1.2
					//控制宽度,其他使用默认宽度
				}],
				obj:mutliSelectInput.filter(":gt(0)"),
				data:[{name:"陆家嘴",value:"1"},{name:"人民广场",value:"2"},{name:"南京东路",value:"3"},{name:"南京西路",value:"4"},{name:"张江高科",value:"5"},{name:"世纪大道",value:"6"},{name:"世纪公园",value:"7"},{name:"金科路",value:"8"},{name:"张南路",value:"9"}],
				parentClass:"selectBox",
				childClass:"selectBoxItem",
				dataFn:function(){
					return "asdasd=asda";
				},
				width:1
				//给所有的下拉框,一个默认宽度,支持像素和纯数字,
				//数字按照倍数操作
			});
		});
	
			

查看对应的demo

OK,本插件可能还有很多我没有注意到的地方可以进一步进行扩展功能,暂时能想到的需要的功能,都已添加到该插件,需要则自提。

本文地址:http://www.zhangyunling.com/?p=291

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>