ajax实现省市联动

最新推荐文章于 2022-12-18 13:56:30 发布

那头山更高

最新推荐文章于 2022-12-18 13:56:30 发布

阅读量1.2k

点赞数

分类专栏： JavaEE 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_42735880/article/details/82996767

版权

JavaEE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//页面加载成功查询所有的省
		$.get(
			"${pageContext.request.contextPath}/selectPro",
			function(d){
				var $pro=$("#proid");
				$(d).each(function(){
					$pro.append("<option value="+this.provinceid+">"+this.name+"</option>");
					
				});
			},
			"json"
		);
		//给省份下拉选派发change事件
		$("#proid").change(function(){
			//获取省份id
			var $pid = $(this).val();
			alert($pid);
			//发送ajax请求，查询所有的市 
			$.get(
					"/pro-city/selectCity",
					{"pid":$pid},
					function(d){
						alert(d);
						var $city = $("#cityid");
						//初始化
						$city.html("--请选择--");
						$(d).each(function(){
							//alert(this.name);
							
							$city.append("<option value="+this.cityid+">"+this.name+"</option>");
							
						});
					},
					"json"
					
					
			
			);
			
		});
	})
</script>
<title>省市联动</title>
</head>
<body>
	<select id="proid" name="province">
		<option>--省份--</option>
	</select>
	<select id="cityid" name="city">
		<option>--请选择--</option>
	</select>
</body>
</html>

servlet、service、dao还是那一套流程，这里就省略了

那头山更高

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax实现省市联动

jsp页面&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
复制链接

扫一扫

专栏目录