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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
jQuery知识点整理
Jan 30 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
mocha的时序规则讲解
Feb 16 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php反射应用示例
2014/02/25 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python学习资料
2007/02/08 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
基于Django统计博客文章阅读量
2019/10/29 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
培训心得体会
2013/12/29 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
大学四年个人自我小结
2014/03/05 职场文书
股东协议书范本
2014/04/14 职场文书
争先创优演讲稿
2014/09/15 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python