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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
微信小程序实现图片上传
May 23 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 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
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
老师推荐信
2013/10/28 职场文书
校三好学生主要事迹
2014/01/11 职场文书
基层工作经历证明
2014/01/13 职场文书
绿化工程实施方案
2014/03/17 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
考研英语辞职信
2015/05/13 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android