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利用div背景,做一个竖线的效果。
Nov 22 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
详解es6新增数组方法简便了哪些操作
May 09 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
cssQuery()的下载与使用方法
2007/01/12 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python编程开发之类型转换convert实例分析
2015/11/13 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python3如何判断三角形的类型
2020/04/12 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
会计电算化专业求职信
2014/06/10 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
工作检讨书500字
2014/10/19 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技