這兩天，做小專案碰到了一個問題，流程是這樣的，一個下拉框控制型別，另一個下拉框根據前一個下拉框的內容變化而變化，通俗的說就是級聯操作。前一個下拉框影響另一個下拉框的內容。 而在這裡我主要遇到的問題是返回的List和我原來用到的完全不一樣。這裡直接看例項：

<!-- 機構型別 -->
    <div class="form-group">
        <label class="col-md-3 control-label">借出使用者型別:</label>
	<div class="col-md-4">
	<select name="lend.stationType" id="stationType" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1">
	    <option value="">--請選擇--</option>
	    <option value="1" select="selected" >員工</option>
	    <option value="2">監測站</option>
	</select>
	</div>
    </div>
<!-- 機構 -->
    <div class="form-group">
        <label class="col-md-3 control-label"><font color="red">*</font>機構:</label>
	<div class="col-md-4">
	<select name="lend.station" id="station" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1">
	    <option value="">---請選擇--- </option>
	    <c:forEach var="comList" items="${companyList }">
	        <option value="${comList.YHBH }">${comList.YHMC }</option>
	    </c:forEach>
	</select>										
	</div>
    </div>
 

這裡剛進入這個頁面的時候，我是直接顯示員工型別和員工的姓名，如果改變型別那麼下一個下拉框的內容也隨之變化,通過ajax返回一個關於機構的集合。

下面是我寫的js：

$("#stationType").change(function(){
	var types = $("#stationType").val();
	if(types != ""){
		$.ajax({
			type : "POST",
			url : "product_changeStationType.action",
			data : {stationType:types, t:Math.random()},
			success:function(res){
				var dataObj = JSON.parse(res);
            	                //var resd = eval(res["list"]);
				if(types == "1"){ // 公司
					var opts = '<option value="" >---請選擇---</option>';
					for(var i = 0; i <dataObj.length; i++){
						opts += '<option value="'+dataObj[i].YHBH+'">'+dataObj[i].YHMC+'</option>';
					}
					
					$("#station").html(opts);
				}
				else{
					if(types == "2"){
						var opts = '<option value="" >---請選擇---</option>';
						for(var i = 0; i <dataObj.length; i++){
							opts += '<option value="'+dataObj[i].BMBM+'">'+dataObj[i].BMMC+'</option>';
						}
						$("#station").html(opts);
					}
					else{
						alert("資料型別錯誤，請重新進入此頁面");
					}
				}
			},
			error:function(){
				alert("返回的資料型別不匹配");
			}
		});
	}
})
 

後臺：

	public void changeStationType(){
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpSession session= request.getSession();
		int stationType = Integer.parseInt(request.getParameter("stationType").toString());
		HashMap map = new HashMap();
		HttpServletResponse response = ServletActionContext.getResponse();
		if(stationType == 1){
			StringBuffer companySql = new StringBuffer("select t.yhbh,t.yhmc from base_yh t where t.bm='420000000001' and t.zt='1' ");
			companyList = (List) baseDao.loadBySql(companySql.toString(), null);
			this.printToJson1(companyList);
		}
		else{
			if(stationType == 2){
				StringBuffer sybmSql = new StringBuffer("select t.bmbm,t.bmmc from ckgl_sybm t  ");
				sybmList = (List) baseDao.loadBySql(sybmSql.toString(), null);
				this.printToJson1(sybmList);
			}
			else{
				//輸出型別出錯
				this.printToJson("");
			}
		}
	}
 

	public void printToJson1(List json){
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		try {
			JSONArray jsons = JSONArray.fromObject(json);
			response.getWriter().print(jsons);
		} catch (IOException e) {
			
		} 
	}

這裡是在後臺生成一個list，再轉為JsonArray陣列形式傳給前臺，老實說每次這樣關於後臺傳前臺我用過多種辦法，但每次寫完都不記得了，這裡做一個記錄，避免以後忘記了。

 通過ajax，後臺傳給前臺一個List 就用這種方式。