php三级联动 一个下拉框 两个文本框,基于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部分代码：

这里的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的级别是最高的，也可以放在input的data-url属性中，当没有显示的在options中输入时，就会去这里查找data-url的值，如果有该值，就使用该值。

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

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";

}

});

});

甚至，也可以arr和obj都有值，那么obj的input框，会接在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

//给所有的下拉框，一个默认宽度，支持像素和纯数字，

//数字按照倍数操作

});

});

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