关于city.js选择城市修改编辑时回显问题

引入<script src="/public/js/city.js"></script>的js，在选择省市县时，还是比较方便的

加入以下代码

var cityAll = city.citylist;
$.each(cityAll, function(i, n) {
			$("#provinceName").append(
					'<option value="'+ n.p + '">' + n.p + '</option>');
		});
		$("#provinceName,#cityName").change(
						function() {
							if ($(this).attr("id") == "provinceName") {
								$("#cityName").html("").next().html("").append('<option value="县、镇">县、镇</option>');
							} else {
								$("#townName").html("").append('<option value="县、镇">县、镇</option>');
							}
							$.each(cityAll, function(j, k) {
								if ($("#provinceName").val() == k.p) {
									$.each(k.c,function(l,m) {
										$("#cityName").append('<option value="'+ m.n + '">'+ m.n + '</option>');
											if (m.a) {
												$("#townName").show();
												if ($("#cityName").val() == m.n) {
													$.each(m.a,function(e,f) {
														$("#townName").append('<option value="'+ f.s + '">'+ f.s+ '</option>');
													});
												}
											} else {
												$("#townName").hide();

											}});
										}
									});
						});

在jsp或html文件中

<td class="tl"><b></b>员工地址</td>
 <td class="tr" id="" colspan="5">
 <select class=" " id="provinceName" name="provinceName">
          <option>${userInfo.provinceName }</option>
  </select>
 <select class=" " id="cityName" name="cityName">
              <option>${userInfo.cityName }</option>
 </select>
 <select class=" " id="townName" name="townName">
            <option>${userInfo.townName }</option>
 </select>

新增时可以的，反正只是选择，但是如果是编辑，就会出现城市或乡镇选择不了情况，如下图

这个问题困扰我好久，一直没有解决，后来一个偶然的机会，我把改变城市的代码提取出来就可以的了，

$.each(cityAll, function(j, k) {
				if ($("#provinceName").val() == k.p) {
					$.each(k.c,function(l,m) {
						$("#cityName").append('<option value="'+ m.n + '">'+ m.n + '</option>');
							if (m.a) {
								$("#townName").show();
								if ($("#cityName").val() == m.n) {
									$.each(m.a,function(e,f) {
										$("#townName").append('<option value="'+ f.s + '">'+ f.s+ '</option>');
									});
								}
							} else {
								$("#townName").hide();

							}});
						}
					});

 

整个代码结构

var cityAll = city.citylist;
		
		$(function(){
			changeCity();
		});
		
		//改变城市
		function changeCity() {
			$.each(cityAll, function(j, k) {
				if ($("#provinceName").val() == k.p) {
					$.each(k.c,function(l,m) {
						$("#cityName").append('<option value="'+ m.n + '">'+ m.n + '</option>');
							if (m.a) {
								$("#townName").show();
								if ($("#cityName").val() == m.n) {
									$.each(m.a,function(e,f) {
										$("#townName").append('<option value="'+ f.s + '">'+ f.s+ '</option>');
									});
								}
							} else {
								$("#townName").hide();

							}});
						}
					});
		}
		
		$.each(cityAll, function(i, n) {
			$("#provinceName").append(
					'<option value="'+ n.p + '">' + n.p + '</option>');
		});
		$("#provinceName,#cityName").change(
						function() {
							if ($(this).attr("id") == "provinceName") {
								$("#cityName").html("").next().html("").append('<option value="县、镇">县、镇</option>');
							} else {
								$("#townName").html("").append('<option value="县、镇">县、镇</option>');
							}
							$.each(cityAll, function(j, k) {
								if ($("#provinceName").val() == k.p) {
									$.each(k.c,function(l,m) {
										$("#cityName").append('<option value="'+ m.n + '">'+ m.n + '</option>');
											if (m.a) {
												$("#townName").show();
												if ($("#cityName").val() == m.n) {
													$.each(m.a,function(e,f) {
														$("#townName").append('<option value="'+ f.s + '">'+ f.s+ '</option>');
													});
												}
											} else {
												$("#townName").hide();

											}});
										}
									});
						});

 

这可以了，既能新增，又能编辑修改，解决问题