首页 > 其他 > 详细

省、市、地区三级联动

时间:2019-08-29 12:52:02      阅读:63      评论:0      收藏:0      [点我收藏+]

一、首先,页面加载的时候,把省级信息查询出来,放进页面中

    

<li>
     <span style="width:215px;">所属城市:</span>
     <select id="pro" name="province" class="select_2" onchange="setLianDong(‘pro‘)">
          <option value="">请选择省</option>
          <#list provinceList as item>
            <option value="${item.xingZhengQuHuaDaiMa}">${item.xingZhengQuHuaName}</option>
          </#list>
     </select>
     <select class="select_2" id="city" name="city" onchange="setLianDong(‘city‘)">
          <option value="">请选择城市</option>
     </select>
                    
      <select class="select_2" id="area" name="area">
          <option value="">请选择区县</option>
      </select>
</li>

 

二、省级触发onchange事件,根据行政区划代码查询市级信息,返回到页面中

 

function setLianDong(param){
    var paramVal = $("#"+param).val();
    $.ajax({
        type:‘post‘,
        dataType : "json",
        url:"${base}/joinIn/xingZhengQuHuaList?paramVal="+paramVal,
        success:function(data){
            if(param==‘pro‘){
                $("#city").empty();
                $("#city").append(‘<option value="" selected="selected">请选择城市</option>‘);
                $.each(data, function(i, val){
                    $("#city").append(‘<option value=‘+val.xingZhengQuHuaDaiMa+‘>‘+val.xingZhengQuHuaName+‘</option>‘);
                });
            }else if(param==‘city‘){
                $("#area").empty();
                $("#area").append(‘<option value="" selected="selected">请选择地区</option>‘);
                $.each(data, function(i, val){
                    $("#area").append(‘<option value=‘+val.xingZhengQuHuaDaiMa+‘>‘+val.xingZhengQuHuaName+‘</option>‘);
                });
            }
        }
    });
}

 

  

省、市、地区三级联动

原文:https://www.cnblogs.com/irishua/p/11428654.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!