修改信息时，省级联动问题记录

最新推荐文章于 2021-06-04 01:06:47 发布

糯唧唧

最新推荐文章于 2021-06-04 01:06:47 发布

阅读量226

点赞数 2

分类专栏： java 文章标签： ajax select fuction

本文链接：https://blog.csdn.net/qiuqiu_qiuqiu123/article/details/84975831

版权

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

处理省份的数据真是个头疼的事情，今天写修改信息时，页面上的下拉框已经有值了，但是下拉框上却没有显示出来绑定过来的值，看了很久，结果是因为绑定下拉框的值的方法写在了ajax请求后面，这样就会存在ajax方法还没执行完，就先执行方法了，说的迷迷糊糊的，看代码吧还是

这个是页面的jsp

						<tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
							<td align="right" valign="middle" class="borderright borderbottom bggray"><span
								class="colorred">*</span>省份：</td>
							<td align="left" valign="middle" class="borderbottom main-for">
								<select class="selected" name="locProv" id="province" data-selected="${tbrhInfo.locProv}">
									<option value="">全部</option>
							</select>
							</td>
						</tr>
						
						<tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
							<td align="right" valign="middle"
								class="borderright borderbottom bggray"><span
								class="colorred">*</span>城市：</td>
							<td align="left" valign="middle" class="borderbottom main-for">
								<select class="selected" name="locCity" id="city" data-selected="${tbrhInfo.locCity}">
									<option value="">全部</option>

							</select>
							</td>
						</tr>

错误原因是因为方法写错了位置，现在的位置是正确的

先写动态设置 option 的selected 选项的方法

function bindOption(name){
		  var selected = $("select[name='"+name+"']").data("selected");
		  if(selected==""||selected==null||selected==undefined){
			 
		  }else{
			  $("select[name='"+name+"'] option[value=" + selected + "]") .attr("selected", true);
		  }
	}

绑定原对象的地址值

	$(function(){
		 $.ajax({    
             url :'${pageContext.request.contextPath}/agent/province',    
             type:'post',    //数据发送方式      
             dataType:'json',   //接受数据格式    
             success:function(data){
	          var optionstring = "";
             for  (var i =0;i<data.length;i++){
	                         optionstring += "<option value=\"" +data[i].areaId + "\" >" + data[i].areaName + "</option>";
	           }
             $("#province").html("<option value=''>请选择</option> "+optionstring);
             selectProvInit();
             }
          });  
		 
	       
	})

	function selectProvInit(){
		bindOption("locProv");
		var opt = $("select[name='locProv'] ") .val();
		$.ajax({    
            url :'${pageContext.request.contextPath}/agent/city?areaId='+opt,    
            type:'post',    //数据发送方式      
            dataType:'json',   //接受数据格式    
            success:function(data){
	          var optionstring = "";
            for  (var i =0;i<data.length;i++){
	                         optionstring += "<option value=\"" +data[i].areaId + "\" >" + data[i].areaName + "</option>";
	           }
            $("#city").html("<option value=''>请选择</option> "+optionstring);
            bindOption("locCity");
            }
         });   
	}

当选择省后将id传到后台获取相对应的城市

	$("#province").change(function() {
		var opt = $("#province").val();
		 $.ajax({    
              url :'${pageContext.request.contextPath}/agent/city?areaId='+opt,    
              type:'post',    //数据发送方式      
              dataType:'json',   //接受数据格式    
              success:function(data){
	          var optionstring = "";
              for  (var i =0;i<data.length;i++){
	                         optionstring += "<option value=\"" +data[i].areaId + "\" >" + data[i].areaName + "</option>";
	           }
              $("#city").html("<option value=''>请选择</option> "+optionstring);
              }
           });   
	})