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常用技巧及常用方法列表集合
Apr 06 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JS实现页面打印功能
Mar 16 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php解析xml方法实例详解
2015/05/12 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
zend framework重定向方法小结
2016/05/28 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python函数嵌套实例
2014/09/23 Python
Python中使用PDB库调试程序
2015/04/05 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
浅谈Django的缓存机制
2018/08/23 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
入党自我鉴定范文
2013/10/04 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
同学聚会感言一句话
2015/07/30 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Python基础之pandas数据合并
2021/04/27 Python