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的并行运算实现代码
Nov 19 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
webpack的移动端适配方案小结
Jul 25 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代码(星期六,星期日总和)
2009/11/12 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python中Class类用法实例分析
2015/11/12 Python
详解重置Django migration的常见方式
2019/02/15 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
优秀毕业生推荐信
2013/11/02 职场文书
售后专员岗位职责
2013/12/08 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
小学班主任事迹材料
2014/12/17 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
MySql分区类型及创建分区的方法
2022/04/13 MySQL