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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
20个最新的jQuery插件
Jan 13 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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网上调查系统
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
20招让你的Python飞起来!
2016/09/27 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python 简单的调用有道翻译
2020/11/25 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
初中数学教学反思
2014/01/16 职场文书
给病人的慰问信
2015/03/23 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android