文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>Jquery Select 插件 lyhucSelect 数据联动

Jquery Select 插件 lyhucSelect 数据联动

时间:2011-03-29  来源:alex hu

数据源:  

View Code

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

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载