省、市、地区三级联动

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

　　　　

<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>');
                });
            }
        }
    });
}