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 相关文章推荐
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
微信小程序实现图片上传功能
May 28 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
基于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中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
javascript操作数组详解
2014/12/17 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python实现图片上添加图片
2019/11/26 Python
python异常处理和日志处理方式
2019/12/24 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
南京某软件公司的.net面试题
2015/11/30 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
初一家长会邀请函
2014/01/31 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
班主任先进事迹材料
2014/12/17 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
安全第一课观后感
2015/06/18 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android