笔记：SSH遇到的问题之单岗位多城市的实现-优快云博客

本文介绍了一个改进的省市区三级联动下拉菜单实现，通过添加.empty()方法避免重复选项，并为默认框添加id=0。同时，实现了动态添加和移除地址功能，最多支持五个地址。通过直接调用getProvince()方法解决省份默认显示问题。

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

在之前省市区三级联动的基础上进行修改。与之前比较，新增了.empty()方法，不然option下拉框会出现重复的地名。也为默认的三级框加了默认id="0"。

省市区三级联动：https://blog.youkuaiyun.com/Sim_ve/article/details/83988145

1.省市区的get方法。方法加入或修改了新的参数。

//获得省
	function getProvince(num){
		var p = $("#"+num).find('select[class*=province]');
		var c = $("#"+num).find('select[class*=city]');
		var a = $("#"+num).find('select[class*=area]');
		
		$.ajax({
			url:"xxx.action",
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
				var html='<option selected value="">请选择</option>';
			for(var i in d){
				html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
			}
			p.empty();
			p.append(html);
			}
		});
		p.change(function(){
			c.html("");
			a.html("");
			getCity(p,c,a);
		});
	} 
//获得市
	function getCity(province,city,area){
		$.ajax({
			url:"xxx.action",
			data:{provinceId:province.val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				city.empty();
				city.append(html);
				city.change(function(){
					area.html('');
					getArea(city,area);
				});
				/* city.get(0).selectedIndex=1 */;//默认选择第一项 
				getArea(city,area); 
			}
		});
	}
//获得区
	function getArea(city,area){
		$.ajax({
			url:"xxx.action",
			data:{cityId:city.val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				/* alert("可以获得数据!");
				alert(data); */
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				area.empty();
				area.append(html);
			}
		});
	}

2.在页面加载完成之后，先调用一下getProvince()，供第一个三级框使用。

$(document).ready(function(){
		 getProvince(0);
	 });

3.添加“新增地址”，直接加在城市下边。

                        <tr id="0">
                            <td align="right"><span class="star_red">*</span>任职城市&nbsp;:</td>
                            <td>
                                <select class="province" id="province" name="province" onblur="checkCity(0)">
                                </select>
                                <select class="city" id="town" name="town" >
                                	<option selected value="">请选择</option>
                                </select>
                                <select class="area" id="area" name="area">
                                	<option selected value="">请选择</option>
                                </select>
                                <span id="province_msg" class="center_msg"></span>
                            </td>
                        </tr>
                        <tr id="new_add">
                        <td></td>
                        <td><a class="bat_msg" href="javascript:;" title="点击进行添加新地址">新增地址</a></td>
                        </tr>

4.然后是添加和移除功能的实现。

    var times = 4; //控制城市数量，最多5个 
	var total = 1; //设置城市的标签，保证不重复
	$("#new_add").click(function(){
		var province = $("tr#new_add").prev().find('select[class*=province]').val();
		if(province=="")
			$("tr#new_add").prev().find('#province_msg').text("请选择完整的城市信息");
		else{
			$("tr#new_add").prev().find('#province_msg').text("");
		if(times>0){
			$("#new_add").before(
					"<tr id="+total+">"
					+"<td align='right'></td>"
					+"<td>"
					+"<select class='province' id='province' name='province' onblur='checkCity("+total+")'>"
					+"</select>"
					+"<select class='city' id='town' name='town'>"
					+"<option selected value=''>请选择</option>"
					+"</select>"
					+"<select class='area' id='area' name='area'>"
					+"<option selected value=''>请选择</option>"
					+"</select>"
					+"<a class='bat_msg' href='javascript:remove("+total+");' >移除</a><br>"
					+"<span id='province_msg' class='center_msg'></span>"
					+"</td>"
					+"</tr>");
			getProvince(total);
			total++;
			times--;
		}else{
			alert("地址最多只能添加5个！");
		}
		}
		});

这里解释一下直接调用getProvince()方法的原因：直接在select中写onclick方法，会出现省份一直是默认第一个的情况。上边加载完成后调用方法也是如此。

移除功能

//移除新增地址 
	function remove(time){
		$("#"+time+"").remove();
		times++;
		total++;
	}

5.后台获取数据。因为多城市都用的是同名，所以后台直接用getParameterValues()方法得到数组。

// 获取省市区编号
			String[] provinceArr = request.getParameterValues("province");
			String[] townArr = request.getParameterValues("town");
			String[] areaArr = request.getParameterValues("area");

由于对dom掌握的不熟练，校验城市的聚焦focus方法没弄好，就直接删去了。