<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%><%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery 三级级联</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test select{
100px;
margin-left:20px;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/three_select.js" type="text/javascript"></script>
<script src="js/three_select_data.js" type="text/javascript"></script>
</head>
<body>
<s:form action="test!save">
<div id="test"></div>
<s:hidden name="s1" id="s1"></s:hidden>
<s:hidden name="s2" id="s2"></s:hidden>
<s:hidden name="s3" id="s3"></s:hidden>
<s:submit title="ddd"></s:submit>
</s:form>
<script type="text/javascript">
$(document).ready(function(){
$("#test").ThreeSelect("#s1","#s2","#s3");
});
</script>
</body>
</html>
----------------------------------------
$.fn.ThreeSelect = function(id1,id2,id3){
var _self = this;
//default values
_self.data("select_1",["---请选择---", ""]);
_self.data("select_2",["全部", ""]);
_self.data("select_3",["全部", ""]);
//insert 3 empty select
_self.append("<select></select>");
_self.append("<select></select>");
_self.append("<select></select>");
//get values from select
var $sel1 = _self.find("select").eq(0);
var $sel2 = _self.find("select").eq(1);
var $sel3 = _self.find("select").eq(2);
// get default values
var default_s1 = $(id1).attr("value");
var default_s2 = $(id2).attr("value");
var default_s3 = $(id3).attr("value");
//default value from 1st select
if(_self.data("select_1")){
$sel1.append("<option value='"+_self.data("select_1")[1]+"'>"+_self.data("select_1")[0]+"</option>");
}
$.each( GP , function(index,data){
$sel1.append("<option value='"+data[1]+"'>"+data[0]+"</option>");
});
//default value from 2nd select
if(_self.data("select_2")){
$sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
}
//default value from 3rd select
if(_self.data("select_3")){
$sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}
$sel1.val(default_s1);
//1st select control
var index1 = "" ;
$sel1.change(function(){
//clear 2nd & 3rd select data
$sel2[0].options.length=0;
$sel3[0].options.length=0;
index1 = this.selectedIndex;
if(index1==0){
if(_self.data("select_2")){
$sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
}
if(_self.data("select_3")){
$sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}
}else{
if(_self.data("select_2")){
$sel2.append("<option value='"+_self.data("select_2")[1]+"'>"+_self.data("select_2")[0]+"</option>");
}
$.each( GT[index1-1] , function(index,data){
$sel2.append("<option value='"+data[1]+"'>"+data[0]+"</option>");
});
if(_self.data("select_3")){
$sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}
$.each( GC[index1-1][0] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
});
}
$(id1).attr("value", this.value);
$(id2).attr("value", "");
$(id3).attr("value", "");
}).change();
//2nd select control
$sel2.val(default_s2);
var index2 = "" ;
$sel2.change(function(){
$sel3[0].options.length=0;
index2 = this.selectedIndex;
if(index2==0){
if(_self.data("select_3")){
$sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}
}else{
if(_self.data("select_3")){
$sel3.append("<option value='"+_self.data("select_3")[1]+"'>"+_self.data("select_3")[0]+"</option>");
}
$.each( GC[index1-1][index2-1] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
});
}
$(id2).attr("value", this.value);
$(id3).attr("value", "");
}).change();
$sel3.val(default_s3);
$sel3.change(function(){
$(id3).attr("value", this.value);
}).change();
return _self;
};
--------------------------------------
var GP =[['安徽','ah'],['澳门','aomen'],['北京','beijing']];
var GT = [
[['合肥','hf1'],['安庆','aq1']],
[['澳门','aomen1']],
[['昌平','changping1'],['海淀','haiding1'],['其他','qita1']]
];
var GC = [
[
['长丰','肥东','肥西','合肥市'],
['安庆市','枞阳','怀宁','潜山','宿松','太湖','桐城','望江','岳西']
],
[ ['澳门'] ],
[
['昌平','朝阳','崇文','大兴','东城','房山','丰台'],
['海淀','怀柔','门头沟','密云','平谷','石景山','顺义'],
['通州','西城','宣武','延庆']
]
];