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=$("
$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的负载。