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 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
Angular短信模板校验代码
Sep 23 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP实现简易blog的制作
2016/10/24 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
pytorch 求网络模型参数实例
2019/12/30 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
合伙经营协议书范本
2014/04/18 职场文书
学校四群教育实施方案
2014/06/12 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
电工实训心得体会
2016/01/14 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android