一个简单的支持IE8,主流浏览器,不需要JQuery依赖的

 使用: 1.引入js文件

<script type="text/javascript" src="MultiLevelLinkage.js"></script>

2.在html中写select标签,插件可以用id,css等可以选中select的选择器  

<select id="s" class="c"></select>

3.配置插件 设置opt对象配置插件

opts.data只能定义一个,本地数据对象和AJAX数据对象只能存在一个,data长度大于select的长度,多余的data会被抛弃

opts.select是一组select数组,按照定义顺序嵌套层,select数组只能是select的对象,数组不可以重复,第一个是最上层的select,自动忽略非select对象和重复的,至少是数组只有一个值,data的长度小于select的长度,多余的select会被不启用

opts.defaultText 自定义提示文字,默认为"请选择"

例子:

var opts = { data: data, select: ["#s",".c",".c2",".c3",".c4",".c5"], defaultText:"defaultText" };

opts.data数据的结构:

//相同键值后定义会覆盖前定义的,多余的cell会被丢弃 //text对应option的text,value对应option的value, //value和cell可以不定义,text会代替value //除了value,text,cell以外可以自定义自己需要的属性, //getValue会返回选中的value,和其他绑定的属性 var data = { 1: {text: '蔬菜', value:100, cell: { 10: {text: '菠菜', value: 4 }, 11: {text: '茄子', value: 5} } }, 2: {text: '肉', value:100 }, 3: {text: '水果', cell: { 30: {text: '苹果', cell: {301: {text: '红富士', value: 20} } } , 31: {text: '桃', cell: { 310: {text: '猕猴桃', value: 30}, 311: {text: '油桃', value: 31}, 312: {text: '蟠桃', value: 32} } } } }, 4: {text: '粮食', value:300, cell: { 40: {text: '水稻', cell: { 401: {text: '大米', cell: {4001: {text: '五常香米', value: 50}} } } } } } };

AJAX的数据:

//没有method默认get, //parameter默认为"", //requestHeader默认为[{key:'Content-Type',value:'application/x-www-form-urlencoded'}], //async表示请求是否异步处理。默认是 true。 var dataAjax={url:"http://localhost:3000/linkage", method:"get", async:"true", parameter:'key1=value1&key2=value2', //requestHeader:[{key:'Content-Type',value:'application/x-www-form-urlencoded'}], requestHeader:[] }

调用MultiLevelLinkage对象的init方法把opts传进去就可以了 var Linkage=MultiLevelLinkage.init(opts);

getValue方法

//getValue方法默认不带参数返回数组,数组包括全部select选中的value和与其绑定的data //带参数,参数为querystring 用来选中单独的select,返回一个对象,对象包括select选中的value和与其绑定的data Linkage.getValue()//返回数组 Linkage.getValue("#s")//返回对象