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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
利用JS实现数字增长
Jul 28 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
主题实践活动总结
2014/05/08 职场文书
企业承诺书怎么写
2014/05/24 职场文书
小学六一主持词开场白
2015/05/28 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript