核心代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8" >
<title>省市级联查询</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function (){
$("#btnload").click(function (){
//发送一个ajax请求
$.ajax({
url:"province",
dataType:"json",
success:function (sper){
$("#province").empty();
$.each(sper,function (i,n){//遍历json数据
$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>" );
})
}
})
} )
$("#province").change(function (){
/* $("#city").empty();
$.each(function (){
$("#city").append()
})*/
var abc=$("#province>option:selected");
var city=abc.val();
$("#city").empty();
$.get( "city",{proid:city },call,"json")
})
})
call=function (resp){
$.each(resp,function (i,n){
$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>" );
} )
}
</script>
</head>
<body>
<center>
<p>使用ajax实现省市级联查询</p>
<table border="2">
<tr>
<td>省份名称</td>
<td>
<select id="province">
<option value="0">请选择.....</option>
</select>
</td>
<td>
<input type="button" value="load数据" id="btnload">
</td>
</tr>
<tr>
<td>城市名称</td>
<td>
<select name="" id="city">
<option value="0">请选择...</option>
</select>
</td>
</tr>
</table>
</center>
</body>
</html>