<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'xialakuang.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style type="text/css">
.one{
float:left;
}
.two{
float:left;
width:200px;
height:100px;
border:1px red dashed;
margin-left:10px;
color:green;
}
</style>
<script type="text/javascript">
$(function(){
function lyz(e){ //下拉列表初始化
$(e).html("<option>请选择</option>");
}
var data = {
山东:{济南:"槐荫区,长清区,高新区,天桥区",烟台:"莱山区,福山区,芝罘区"},
河北:{衡水:"枣强县,新河县",石家庄:"鹿泉区,栾城区"},
河南:{郑州:"温县,新密市",许昌:"扶沟县,太康县"}
};
//遍历数据增加省份项
$.each(data,function(a){
$(".sheng").append("<option>"+a+"</option>");
});
//alert("aaa");
//省份列表框改变事件
$(".sheng").change(function(){
lyz(".cheng"); //城市的下拉框初始化
lyz(".xian"); //县级的下拉框初始化
// index value
$.each(data,function(a,b){
if($(".sheng option:selected").text() == a){ //如果省份选中项与数据匹配
//alert(a);
$.each(b,function(c,d){ //遍历数组
$(".cheng").append("<option>"+c+"</option>"); //增加城市项
});
//城市列表项改变事项
$(".cheng").change(function(){
lyz(".xian");
$.each(b,function(c,d){ //遍历数据
if($(".cheng option:selected").text() == c){ //如果城市选中项与数据匹配
//alert(c);
$.each(d.split(","),function(){ //遍历数组增加型号项， split()方法用于把一个字符串分割成字符串数组
$(".xian").append("<option>"+this+"</option>");
});
}
});
});
}
});
});
$(".one").click(function(){
var aa="您选择的省份：";
aa += $(".sheng option:selected").text()+"<br/>";
aa += "您选择的城市是：";
aa += $(".cheng option:selected").text()+"<br/>";
aa += "您选择的县区是：";
aa += $(".xian option:selected").text()+"<br/>";
$(".two").append(aa);
});
});
</script>
</head>
<body>
省份：<select class="sheng"><option>请选择</option></select>
城市：<select class="cheng"><option>请选择</option></select>
县级：<select class="xian"><option>请选择</option></select><br/><br/>
<button class="one">输出</button>
<div class="two"></div>
</body>
</html>