1. html前段程式碼

<div class="row">
	   <div class="col-sm-12">   
            <label class="col-sm-1 control-label">地址 </label> 
       <div class="col-sm-3"> 
			 <#select id ="province_code" name="省"> 
			     <option>請選擇</option>
			 </#select>  
        </div>
        <div class="col-sm-3">  
	         <#select id="city_code" name="市" >
	              <option>請選擇</option>
	         </#select> 
        </div>
        <div class="col-sm-3">  
	       <#select id="area_code" name="區">
	                <option>請選擇</option>
	       </#select>
        </div>  
	</div>
</div> 
 

2.  js程式碼

$(function() {
	Feng.findCodeType("aa", "ticketType", "ab");
	TeaUserInfoDlg.getCity();
});

/**
 * 下拉選單
 */
TeaUserInfoDlg.getCity = function(){ 
		 var ajax = new $ax(Feng.ctxPath + "/teaUser/selectcity", function (data) {
	             if(!data)
	              return; 
		            var html = "";            //追加表格
		            for ( var e in data) {    //遍歷data
					    html += '<option 
                           value='+data[e].id+'>'+data[e].areaName+'</option>'	
					}
		            $("#province_code").append(html) 
		            $("#province_code").change(function(){   //點選省後 觸發 市的事件
		            	  $("#city_code").html("");  
		            	  $("#area_code").html("");
		            	  TeaUserInfoDlg.Area($(this).val());
		            })
	        }, function (data) {
	            Feng.error("失敗!" + data.responseJSON.message + "!");
	        }); 
		    ajax.set("teaUserId",0); //傳入引數
	        ajax.start();  
} 
/**
 * 市級
 */
TeaUserInfoDlg.Area = function(id){ 
	 var ajax = new $ax(Feng.ctxPath + "/teaUser/selectcity", function (data) {
         if(!data)
          return; 
            var html = "";  
            for ( var e in data) {
			    html += '<option value='+data[e].id+'>'+data[e].areaName+'</option>'	
			}
            $("#city_code").append(html) 
            $("#city_code").change(function(){
            	  $("#area_code").html(""); 
            	  TeaUserInfoDlg.Code($(this).val());
            })
            $("#city_code").get(0).selectedIndex = 0  //預設載入第一行 （大坑）
            TeaUserInfoDlg.Code($("#city_code").val())
    }, function (data) {
        Feng.error("失敗!" + data.responseJSON.message + "!");
    }); 
    ajax.set("teaUserId",id);
    ajax.start(); 
}

/**
 * 縣級
 */
TeaUserInfoDlg.Code = function(id){
	var ajax = new $ax(Feng.ctxPath + "/teaUser/selectcity", function (data) {
        if(!data)
         return; 
           var html = "";
           for ( var e in data) {
			    html += '<option value='+data[e].id+'>'+data[e].areaName+'</option>'	
			}
           $("#area_code").append(html)  
   }, function (data) {
       Feng.error("失敗!" + data.responseJSON.message + "!");
   }); 
   ajax.set("teaUserId",id);
   ajax.start(); 
}
 

3.Controller路徑

    @RequestMapping("/selectcity")
    @DataSource(name=DSEnum.DATA_SOURCE_YESTAE)  //多個數據源配置
    @ResponseBody
    public Object selectcity(){ 
    	Map<String, String> map = HttpKit.getRequestParameters();  //map抓參
    	List<Map<String, Object>> list = 
        teaUserService.selectcity(Integer.valueOf(map.get("teaUserId"))); 
		return list; 
    }
    
 

4. xml程式碼

<resultMap type="Map" id="_selectcity">
      <result column="id" property="id" />
      <result column="area_name" property="areaName" />
      <result column="area_parent_id" property="areaParentId" />
</resultMap>

<select id="selectcity" resultMap="_selectcity">
      SELECT id,area_name,area_parent_id FROM dt_area a WHERE a.area_parent_id = #{id}
</select>

Java菜鳥  勿噴