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 实现完美include载入实现代码
Aug 05 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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
2006/10/09 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python SQLite3简介
2018/02/22 Python
Python实现注册、登录小程序功能
2018/09/21 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
基于python3的socket聊天编程
2020/02/17 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
大学生个人求职信范文
2013/09/21 职场文书
工商管理应届生求职信
2013/10/07 职场文书
库房保管员岗位职责
2014/04/07 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书