<%@ 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%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<title>省市县级联</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="extjs/ext/jquery.json.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON(
"city",
function(data){
$.each(data,function(cityIndex,city){
alert(city["cityname"]);
$("#province").empty(); //清空省列表
$("#province").append("<option value='0'>----选择省份----</option>"); //添加一个初始化选择项
$("#province").append("<option value="+city["cityid"]+">"+city["cityname"]+"</option>");
});
}
);
});
function findCity(){
$("#city").empty(); //清空城市列表
$("#city").append("<option value='0'>----选择城市----</option>"); //添加一个初始化选择项
$("#district").empty(); //清空区县列表
$("#district").append("<option value='0'>----选择县区----</option>"); //添加初始化区县
$.ajax({
type: "POST", //发送给服务器的类型是 post
url: "city", //发送到服务器的地址
data: "op=findCity&pid="+$("#province").val(), //请求的参数
dataType: "Json", //接受返回的数据类型
success:function(data){ //定义回调函数 success 为成功返回
//1.转换成jquery对象,2.查找里面的citys节点,3.查找里面的 ctiy 节点
$(data).find("citys").find("city").each(function (){//遍历 city节点
var cid=$(this).find("cid").text(); //获取cid 的值
var cname=$(this).find("cname").text(); //获取 cname的值
$("#city").append("<option value='"+cid+"'>"+cname+"</option>"); //添加到city 列表中
});
}
});
}
function findDistrict(){
$("#district").empty();
$("#district").append("<option value='0'>----选择县区----</option>");
$.ajax({
type: "POST",
url: "district.do",
data: "op=findDistrct&cid="+$("#city").val(),
dataType: "xml",
success: function (data){
$(data).find("districtList").find("district").each(function (){
var did=$(this).find("did").text();
var dname=$(this).find("dname").text();
$("#district").append("<option value='"+did+"'>"+dname+"</option>");
});
}
});
}
</script>
</head>
<body>
<select id="province" onchange="findCity()">
<option value="0">----选择省份----</option>
<c:forEach items="${provinceList}" var="p">
<option value="${p.pid }">${p.pname }</option>
</c:forEach>
</select>
<select id="city" onchange="findDistrict()">
<option value="0">----选择城市----</option>
</select>
<select id="district">
<option value="0">----选择县区----</option>
</select>
</body>
</html>
2925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
