三级联动前台代码

最新推荐文章于 2022-03-26 23:27:33 发布

奥贝利斯克巨神兵

最新推荐文章于 2022-03-26 23:27:33 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/qq_41950069/article/details/80693059

版权

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/index_love.css">
<title>Insert title here</title>
<script type="text/javascript">
function selectshi(){
var shengId = $("[name='sheng'] :selected").val();
$("[name='shi']").html("");
$("[name='xian']").html("");
$.post("selectshi.do",{"shengId":shengId},function(array){
for ( var i = 0; i < array.length; i++) {
$("[name='shi']").append("<option value="+array[i].id+">"+array[i].name+"</option>");
}
var shiId = $("[name='shi'] :selected").val();
$.post("selectxian.do",{"shiId":shiId},function(array){
for ( var i = 0; i < array.length; i++) {
$("[name='xian']").append("<option value="+array[i].id+">"+array[i].name+"</option>");
} 
},'json');
},'json');
}
function selectxian(){
var shiId = $("[name='shi'] :selected").val();
$("[name='xian']").html("");
$.post("selectxian.do",{"shiId":shiId},function(array){
for ( var i = 0; i < array.length; i++) {
$("[name='xian']").append("<option value="+array[i].id+">"+array[i].name+"</option>");
} 
},'json');
}
</script>
</head>
<body>
<table>
<tr>
<td>省:
<select name="sheng" onchange="selectshi()">
<option>请选择</option>
<c:forEach items="${cityList}" var="city">
<option value="${city.id}">${city.name}</option>
</c:forEach>
</select>
</td>
<td>市:
<select name="shi" onchange="selectxian()">
<option>请选择</option>
</select>
</td>
<td>县:
<select name="xian">
<option>请选择</option>
</select>
</td>
</tr>
</table>

</body>

思想：给省和市添加一个onchange内容改变事件，通过ajax异步去后台执行方法获取到市和县的数据。

注意:在追加前，需要将里面的html内容清空。还有需要导jquery的库