使用jq和Ajax来实现省市的二级联动

最新推荐文章于 2022-01-19 22:31:41 发布

原创最新推荐文章于 2022-01-19 22:31:41 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jsp新手

本文介绍如何使用jq和Ajax实现网页上的省市二级联动效果。通过在jsp页面生成省份下拉列表，并在选择省份后动态加载对应城市，实现了用户体验的提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jq和Ajax来实现省市的二级联动

在跳转到需要二级联动的页面需要给第一级的省份传过去，在jsp页面中进行生成

<td>居住地：
<select name="province" id="province">
	<%
		List<City> list_c = (List<City>) request.getAttribute("list_c");
			out.print("<option selected>请选择</option>");
			if (list_c != null && list_c.size() > 0) {
				for (City city : list_c) {
					out.print("<option value="+city.getId()+">"+city.getName()+" </option>");
				}
			}
	%>
</select>

然后给省份绑定change事件

		$("#province").change(function() {
			var proValue = $("#province").val();
			addCity(proValue);
		})
//需要传递省份的id参数给后台

接下来我们需要把Ajax的后台写好

resp.setContentType("text/html;charset=UTF-8");
//这里我使用的是HTML的写法 而非XML的写法
String id = req.getParameter("id");

UserService us = new UserService();
List<City> list_c = us.selectCityFromProvince(Integer.parseInt(id));
//这里得到一个装有省份id的查询结果集合

StringBuffer sbf = new StringBuffer();
sbf.append("[");
PrintWriter out = resp.getWriter();
if (list_c != null && list_c.size() > 0) {
	for (City city : list_c) {
		sbf.append("{");
		sbf.append("\"id\":\""+city.getId()+"\",");
		sbf.append("\"name\":\""+city.getName()+"\"");
		sbf.append("},");
	}
//将这个集合遍历写成json对格式然后写回
	String  str = sbf.toString();
	str = str.substring(0,str.length()-1);
	str+="]";
	System.out.println(str);
	out.write(str);
	return;
}

//若是没有得到查询结果 则返回false；
out.write("false");
return;

接下来我们在前台的jsp页面中写好我们的addCity方法；

function addCity(id) {
	$.ajax({
		type : "POST",
		url : "AjaxProvince",
		async : true,
		data : "id="+id,
		success : function (message){
			if(message=="false"){
				alert("数据加载失败，请刷新重试")
			}else{
				var arr = eval(message);
				//这里将得到的json串进行处理
				$("#citya option").remove();
				//这里须对city内的option删除一下

这是没有清理option的后果
在这里插入图片描述

				$.each(arr,function(index,obj){
						$("#citya").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
					//接下来直接用jq得到城市的select ID来循环添加option就大功告成了