lyhucSelect基于Jquery的Select数据联动插件

 更新时间:2011年03月29日 23:53:07   作者:  
lyhucSelect基于Jquery的Select数据联动插件,需要的朋友可以参考下。
数据源:
复制代码 代码如下:

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'});
效果:

相关文章

  • 利用jquery实现瀑布流3种案例

    利用jquery实现瀑布流3种案例

    这篇文章主要为大家详细介绍了利用jquery实现瀑布流2种案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • jQuery实现滚动切换的tab选项卡效果代码

    jQuery实现滚动切换的tab选项卡效果代码

    这篇文章主要介绍了jQuery实现滚动切换的tab选项卡效果代码,涉及jquery链式操作及样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 使用jQuery动态加载js脚本文件的方法

    使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术。这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js
    2014-04-04
  • jQuery下的几个你可能没用过的功能

    jQuery下的几个你可能没用过的功能

    用jQuery好久了,都做了两个项目了。今儿晚上喝咖啡喝多了,这都两点多了睡不着,给大家分享下我在项目中用到的一些用jQuery实现的一些比较好的功能。希望对一些新手有点用。。。高手们可以拍砖哈。。。。我头很硬不怕疼。。。呵呵。
    2010-08-08
  • jquery input checked全选与反选1.3.2的版本

    jquery input checked全选与反选1.3.2的版本

    jquery 全选与反选1.3.2的版本
    2009-05-05
  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jquery实现Ajax请求的几种常见方式总结

    jquery实现Ajax请求的几种常见方式总结

    这篇文章主要介绍了jquery实现Ajax请求的几种常见方式,结合实例形式总结分析了jQuery实现ajax请求常用的load()、post()、get()及Ajax()方法相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 使用DataTable插件实现异步加载数据

    使用DataTable插件实现异步加载数据

    本文给大家分享的是Jquery+dataTable插件来实现异步加载数据的示例代码,非常实用,有需要的小伙伴可以参考下
    2017-11-11
  • jQuery实现弹幕特效

    jQuery实现弹幕特效

    这篇文章主要为大家详细介绍了jQuery实现弹幕特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除。jQuery提供了两种删除节点的方法,remove()方法和empty()方法下面为大家详细介绍下
    2014-01-01

最新评论