| <%@ page language="java" contentType="text/html; charset=UTF-8"
? ? pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="Oracle Java Technologies | Oracle" prefix="c"%>
<%@ taglib uri="Oracle Java Technologies | Oracle" prefix="fn"%>
<%@ taglib uri="Oracle Java Technologies | Oracle" prefix="fm"%> ? ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
?省：?
?<select name="province" id="province" ?onchange="changeCity()">
<c:forEach items="${province }" var="list">
?? ?<option value="${list.id }" >${list.name }</option>
?</c:forEach>
? ? ?
?</select>?
? 市：
?<select id="city" name="city" onchange="changeDistrict()">
? ? ? <option value="">-- 请选择市 --</option>
?</select>
? 区（县）：
<select id="district" name="district" onchange="changehidden()">
? ? ? <option value="">-- 请选择县(区) --</option>
</select> -->
</body>
<script type="text/javascript">
? ? function changeCity(){
? ? ? ? //当省的内容发生变化的时候，响应的改变省的隐藏域的值
? ? ? ? $("#phidden").val($("#province option:selected").html());
? ? ? ? //页面加载完成，将省的信息加载完成
? ? ? ? //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
? ? ? ? var pid = $("#province").val();
? ? ? ? alert(pid);
? ? ? ? $.ajax({
? ? ? ? ? ? url:"/sky-ssm/getcity",
? ? ? ? ? ? type:'post',
? ? ? ? ? ? data:{"pid":pid},
? ? ? ? ? ? dataType: "json",
? ? ? ? ? ? success:function(data){
? ? ? ? ? ? ? ? //清空城市下拉列表框的内容
? ? ? ? ? ? ? ? $("#city").html("<option value=''>-- 请选择市 --</option>");
? ? ? ? ? ? ? ? $("#district").html("<option value=''>-- 请选择区/县 --</option>");
? ? ? ? ? ? ? ? //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
? ? ? ? ? ? ? ? for(var i=0;i<data.length;i++){
? ? ? ? ? ? ? ? ? ? var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
? ? ? ? ? ? ? ? ? ? $("#city").append($option);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? error:function(data){
? ? ? ? ? ? ?? ?alert("失败了");
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? function changeDistrict(){
? ? ? ? //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
? ? ? ? $("#chidden").val($("#city option:selected").html());
? ? ? ? //页面加载完成，将省的信息加载完成
? ? ? ? //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
? ? ? ? var pid = $("#city").val();
? ? ? ? $.ajax({
? ? ? ? ? ? url:"/sky-ssm/getarea",
? ? ? ? ? ? data:{"pid":pid},
? ? ? ? ? ? dataType:"json",
? ? ? ? ? ? success:function(data){
? ? ? ? ? ? ? ? //清空城市下拉列表框的内容
? ? ? ? ? ? ? ? $("#district").html("<option value=''>-- 请选择区/县 --</option>");
? ? ? ? ? ? ? ? for(var i=0;i<data.length;i++){
? ? ? ? ? ? ? ? ? ? var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
? ? ? ? ? ? ? ? ? ? $("#district").append($option);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? function changehidden(){
? ? ? ? //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
? ? ? ? $("#dhidden").val($("#district option:selected").html());
? ? }
</script>
</html>
|