lyhucSelect基于Jquery的Select数据联动插件


Posted in Javascript onMarch 29, 2011

数据源:

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数据联动插件
Javascript 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
js 概率计算(简单版)
Sep 12 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 #Javascript
使用隐藏的new来创建对象
Mar 29 #Javascript
myeclipse安装jQuery插件的方法
Mar 29 #Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 #Javascript
基于jQuery的动态表格插件
Mar 28 #Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 #Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 #Javascript
You might like
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP使用数组实现队列
2012/02/05 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js图片预加载示例
2014/04/30 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
销售活动策划方案
2014/08/26 职场文书
个人求职信格式范文
2015/03/20 职场文书
高中体育课教学反思
2016/02/16 职场文书