JQuery/JS实现的三级联动选择

    前段时间做一个内部项目，要用到三级联动选择（就是三个select组件，他们之间相互影响）通过网上search和study，终于成功解决。

 

要实现三级联动大致有2种实现方式：

       第一种：使用Ajax，这是最简单的一种。三个select（id分别为select1，select2，select3），

               首先发送ajax请求加载select1的options，

               当select1选择后再发送一个ajax请求得到对应的select2的options（要传入select1的selected option），同理，

               当select2选择后再发送一个ajax请求加载select3的options。

               这种方式特点就是实现起来简单，但仔细研究会发现这样会产生很多问题：首先，它会造成大量的ajax请求，占用系统资源。

               其次，重复对数据库进行读取操作，影响服务器性能。总之，这种方式做三级联动是不可取的，但在一些只须二级联动的情况

              下是可以考虑的。

      第二种：利用JQuery/JavaScript，这是比较有效的一种方式。在加载的时候从数据库中读取出需要联动的数据，转换为JSON格式，

                  然后通过JQuery/JS来控制联动。下面贴出一段JS代码，从网上某位高人的帖子中获得，研究了下，写的很好，但就是注释

                  少了些。

                  var $ = jQuery.noConflict();

                  var threeSelect=function(select1,select2,select3,data){

                           var threeSelectData=data;

                           var $s1=select1;

                           var $s2=select2;

                           var $s3=select3;

                           $s1.empty();

                           $s2.empty();

                           if($s3!=null){

                             $s3.empty();

                            }

                           var v1=null;

                           var v2=null;

                           var v3=null;

 

                          $.each(threeSelectData,function(k,v){

                                    appendOptionTo($s1,k,v.val,v1);

                           });

                         $s1.change(function(){

                                $s2.html("");

                                      if($s3!=null){

                                            $s3.html("");

                                        }

                                if(this.selectedIndex==-1) return;

                              var s1_curr_val = this.options[this.selectedIndex].value;

                              //alert(s1_curr_val);

                              $.each(threeSelectData,function(k,v){

                               if(s1_curr_val==v.val){

                                          if(v.items){

                                   $.each(v.items,function(k,v){

                                        //alert(k);alert(v);

                                            appendOptionTo($s2,k,v.val,v2);

                                         });

                                 }

                               }

                           });

                          $s2.change();

                      }).change();

                     $s2.change(function(){

                                  if($s3!=null){

                                          $s3.html("");

                                      }

                                  var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;

                                   if(this.selectedIndex==-1) return;

                                    var s2_curr_val = this.options[this.selectedIndex].value;

                                   $.each(threeSelectData,function(k,v){

                                           if(s1_curr_val==v.val){

                                                     if(v.items){

                                                               $.each(v.items,function(k,v){

                                                                        if(s2_curr_val==v.val){

                                                                                 $.each(v.items,function(k,v){

                                                                                          if($s3!=null){

                                                                                              appendOptionTo($s3,k,v,v3);

                                                                                           }

                                                                                 });

                                                                         }

                                                               });

                                                    }

                                            }

                                     });

                   }).change();

                   function appendOptionTo($o,k,v,d){

                             var $opt=$("<option>").text(k).val(v);

                             $opt.attr("value",v);

                             $opt.attr("title",k);

                             if(v==d){

                                    $opt.attr("selected", "selected");

                              }

                            $opt.appendTo($o);

                    }

           }

          Note:数据源格式必须为JSON格式，如下：

             var threeSelectData={

                        "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}},

                        "湖北":{val:"s2",items:{}},
                        "上海":{val:"s3",items:{}}，
                        "Database":{"val":"1","items":{"SQL_Server":{"val":"12","items":{"Data report":"ss1"}},
                                                                           "MySQL":{"val":"13","items":{"Select":"232","Join":"233"}}
                                            }}
  
              };

 

   在调用之前加载数据，然后把数据转换为如上JSON格式（在java中可用HashMap,ArrayList等实现JSON格式），最后在JS中调用

   该方法threeSelect（），如：threeSelect( $j("#select1"),$j("#select2"),$j("#select3"),SelectData);

   使用这种方式可以在程序加载时load数据，之后就不需要访问数据库，在浏览器端实现，这样可以极大减轻server的负载。