Jquery Select 插件 lyhucSelect 数据联动
2011-03-29 00:21
232 查看
数据源:
View Code
jquery.lyhucSelect.js
调用:
$('#cityCategory').lyhucSelect({dataSource:areaInfo,subSelect:'#areCategory'});
效果:
View Code
var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; areaInfo[0][1]="Beijing"; areaInfo[0][2]="0"; areaInfo[0][3]="0"; areaInfo[1] = new Array(); areaInfo[1][0]="2"; areaInfo[1][1]="Shanghai"; areaInfo[1][2]="0"; areaInfo[1][3]="0"; areaInfo[2] = new Array(); areaInfo[2][0]="3"; areaInfo[2][1]="Jing'an"; areaInfo[2][2]="2"; areaInfo[2][3]="0"; areaInfo[3] = new Array(); areaInfo[3][0]="4"; areaInfo[3][1]="Changning"; areaInfo[3][2]="2"; areaInfo[3][3]="0"; areaInfo[4] = new Array(); areaInfo[4][0]="5"; areaInfo[4][1]="Luwan"; areaInfo[4][2]="2"; areaInfo[4][3]="0"; areaInfo[5] = new Array(); areaInfo[5][0]="6"; areaInfo[5][1]="Huangp"; areaInfo[5][2]="2"; areaInfo[5][3]="0"; areaInfo[6] = new Array(); areaInfo[6][0]="7"; areaInfo[6][1]="Pudong"; areaInfo[6][2]="2"; areaInfo[6][3]="0"; areaInfo[7] = new Array(); areaInfo[7][0]="8"; areaInfo[7][1]="Minhang"; areaInfo[7][2]="2"; areaInfo[7][3]="0"; areaInfo[8] = new Array(); areaInfo[8][0]="9"; areaInfo[8][1]="Qingpu"; areaInfo[8][2]="2"; areaInfo[8][3]="0"; areaInfo[9] = new Array(); areaInfo[9][0]="10"; areaInfo[9][1]="Hongkou"; areaInfo[9][2]="2"; areaInfo[9][3]="0"; areaInfo[10] = new Array(); areaInfo[10][0]="11"; areaInfo[10][1]="Zhabei"; areaInfo[10][2]="2"; areaInfo[10][3]="0"; areaInfo[11] = new Array(); areaInfo[11][0]="12"; areaInfo[11][1]="Putuo"; areaInfo[11][2]="2"; areaInfo[11][3]="0"; areaInfo[12] = new Array(); areaInfo[12][0]="13"; areaInfo[12][1]="Yangpu"; areaInfo[12][2]="2"; areaInfo[12][3]="0"; areaInfo[13] = new Array(); areaInfo[13][0]="14"; areaInfo[13][1]="Others"; areaInfo[13][2]="2"; areaInfo[13][3]="0";
jquery.lyhucSelect.js
(function($) { $.fn.lyhucSelect = function(options) { var element = this; var elementid = "#" + element[0].id; var defaults = { dataSource:{}, subSelect:'#subcategory', option:{text:'--Select--',value:''}, value:'0', parentid:0 }; var options = $.extend(defaults, options); var defaultoption = new Option(); var defaultsuboption = new Option(); (function init(){ defaultoption.text=options.option.text; defaultoption.value=options.option.value; $(elementid).append(defaultoption); defaultsuboption.text=options.option.text; defaultsuboption.value=options.option.value; $(options.subSelect).append(defaultsuboption); $(options.dataSource).each(function(i){ var id=options.dataSource[i][0]; var mc=options.dataSource[i][1]; if(options.parentid==options.dataSource[i][2]) { var newoption = new Option(); newoption.value=id; newoption.text=mc; $(elementid).append(newoption); } }); })(); return this.each(function(){ $(this).bind("change",function(e){ var currentVal=$(this).val(); var tmpDepth=0; $(options.subSelect).empty(); $(options.dataSource).each(function(i){ var id=options.dataSource[i][0]; var mc=options.dataSource[i][1]; if(currentVal==options.dataSource[i][2]) { var newoption = new Option(); newoption.value=id; newoption.text=mc; $(options.subSelect).append(newoption); tmpDepth++; } }); if(tmpDepth==0) { var parentoption = new Option(); parentoption.value=$(elementid).val(); parentoption.text=$(elementid).find('option:selected').text(); $(options.subSelect).append(parentoption); } }); }); }; })(jQuery);
调用:
$('#cityCategory').lyhucSelect({dataSource:areaInfo,subSelect:'#areCategory'});
效果:
相关文章推荐
- lyhucSelect基于Jquery的Select数据联动插件
- lyhucSelect基于Jquery的Select数据联动插件
- bootstrap-select下拉搜索插件 动态加载自己数据的二级联动
- 数据呈现&图表插件Highcharts介绍+图表联动案例
- select2插件编辑数据回显
- 修改select2插件让其可以根据输入数据类型决定从几个字符开始发送请求
- 自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 使用select2插件做联动查询
- jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
- select三级联动结合jquery的chosen.jquery.js 插件一起使用原创案例
- 省市区三级联动插件:app-jquery-cityselect.js
- select下拉联动 (Bootstrap、JQuery插件之cxselect)
- 时间年月日select联动下拉框插件
- 发布自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显
- jquery省市区三级联动插件CitySelect笔记
- jquery插件-cityselect.js扩展(支持4层联动)
- jquery.cxselect.js的使用案例 (动态数据的三级联动)
- iosSelect插件 H5中实现iOS的select下拉联动效果
- Jquery select 三级联动 (需要JSON数据)