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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
完美解决axios跨域请求出错的问题
Feb 05 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
Protoss热键控制
2020/03/14 星际争霸
php获取一个变量的名字的方法
2014/09/05 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
离职告别感言
2015/08/04 职场文书
初一英语教学反思
2016/02/15 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android