<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery-2.0.0.js" type="text/javascript"> </script>
<script src="address.js" type="text/javascript"></script>
<script src="addressdata.js" type="text/javascript"></script>
<script type="text/javascript" src="myscript.js"></script>
<script>
//调用插件
$(function() {
$("#address").ProvinceCity();
});
</script>
</head>
<body>方法一
<div id="address"></div>
方法二
<table>
<tr>
<td align="right">所在地：</td>
<td><select id="province">
<option>选择省份</option>
</select> <select id="city">
<option>选择城市</option>
</select> <select id="area">
<option>选择区域</option>
</select></td>
</tr>
</table>
</body>
</html>
/**myscript.js
* 地址下拉单三级联动
*/
$(function(){
var $province=$("#province");
var $city=$("#city");
var $area=$("#area");
$.each(GP,function(index,data){
$province.append("<option value='"+data+"'>"+data+"</option>");
});
var index1="";
$province.change(function(){
//清空市和区的下拉框
$city[0].options.length=1;
$area[0].options.length=1;
index1=this.selectedIndex;//获取当前选择的省的index
if(index1!=0){//当选择的为"请选择时"
//给市级下拉输入数据
$.each(GC[index1-1],function(index,data){
$city.append("<option value='"+data+"'>"+data+"</option>");
});
}
});
var index2="";
$city.change(function(){
//清空去的下拉框
$area[0].options.length=1;
index2=this.selectedIndex;//获取当前选择的市的index
$.each(GA[index1-1][index2-1],function(index,data){
$area.append("<option value='"+data+"'>"+data+"</option>");
});
});
});
/**address.js
* jQuery : 城市联动插件
* @example $("#address").ProvinceCity();
* @params 暂无
*/
$.fn.ProvinceCity = function(){
var self = this;
//定义3个默认值
self.data("province",["请选择", "请选择"]);
self.data("city1",["请选择", "请选择"]);
self.data("city2",["请选择", "请选择"]);
//插入3个空的下拉框
self.append("<select></select>");
self.append("<select></select>");
self.append("<select></select>");
//分别获取3个下拉框
var $sel1 = self.find("select").eq(0);
var $sel2 = self.find("select").eq(1);
var $sel3 = self.find("select").eq(2);
//默认省级下拉
if(self.data("province")){
$sel1.append("<option value='"+self.data("province")[1]+"'>"+self.data("province")[0]+"</option>");
}
$.each( GP , function(index,data){
$sel1.append("<option value='"+data+"'>"+data+"</option>");
});
//默认的1级城市下拉
if(self.data("city1")){
$sel2.append("<option value='"+self.data("city1")[1]+"'>"+self.data("city1")[0]+"</option>");
}
//默认的2级城市下拉
if(self.data("city2")){
$sel3.append("<option value='"+self.data("city2")[1]+"'>"+self.data("city2")[0]+"</option>");
}
//省级联动 控制
var index1 = "" ;
$sel1.change(function(){
//清空其它2个下拉框
$sel2[0].options.length=0;
$sel3[0].options.length=0;
index1 = this.selectedIndex;
if(index1==0){ //当选择的为 “请选择” 时
if(self.data("city1")){
$sel2.append("<option value='"+self.data("city1")[1]+"'>"+self.data("city1")[0]+"</option>");
}
if(self.data("city2")){
$sel3.append("<option value='"+self.data("city2")[1]+"'>"+self.data("city2")[0]+"</option>");
}
}else{
$.each( GC[index1-1] , function(index,data){
$sel2.append("<option value='"+data+"'>"+data+"</option>");
});
$.each( GA[index1-1][0] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
});
}
}).change();
//1级城市联动 控制
var index2 = "" ;
$sel2.change(function(){
$sel3[0].options.length=0;
index2 = this.selectedIndex;
$.each( GA[index1-1][index2] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
});
});
return self;
};
