很多時候在介面佈局時我們會用到下拉列表，單獨的一個列表與資料庫的互動很簡單

<select>
    <option value="">--請選擇--</option>
    <c:forEach items="${systemList}" var="st" >
        <option value="${st.systemKey}"> ${st.systemName} </option>
    </c:forEach>
</select>

在web層的控制類中

List<copysystem> systemList = ProService.getSystemList();
model.addAttribute("systemList", systemList);

因為在service層沒有什麼操作，所以service層只是個過渡，過渡到Dao層

Dao層就是對資料庫進行連線和查詢，查詢資料。

public List<copysystem> getSystemList() {
    StringBuffer sql = new StringBuffer("");
    sql.append("SELECT systemKey,systemName FROM xl_system");
    return query(sql.toString(), new SystemrowMapper());
}
	
public class SystemrowMapper implements ParameterizedRowMapper<copysystem>{

@Override
    public copysystem mapRow(ResultSet rs, int rowNum) throws SQLException {
	copysystem sys = new copysystem();
	sys.setSystemKey(rs.getString("systemKey"));
	sys.setSystemName(rs.getString("systemName"));
	return sys;
    }
		
}
 

今天要記錄的是當有多個下拉列表聯動時，該怎樣獲取資料，即選擇第一個下拉列表的值，動態的改變第二個下拉列表乃至更多列表的值。

那麼 第一個下拉列表

<select id="search_systemKey"	onchange="getmodule()" name="search_systemKey" class="input-medium">
    <option value="">--請選擇--</option>
        <c:forEach items="${systemList}" var="st" >
	    <option value="${st.systemKey}"> ${st.systemName} </option>
	</c:forEach>
</select>
 

<select id="search_moduleKey" name="search_moduleKey" class="input-medium">
    <option value="">--請選擇--</option>										
</select>

onchange 在元素值改變時觸發。

onchange 屬性適用於：<input>、<textarea> 以及 <select> 元素。

<script type="text/javascript">
    function getmodule() {
        var systemKey=$("#search_systemKey").val(); //獲得第一個列表元素的主鍵
	var obj=document.getElementById("search_moduleKey");//回去id為。。的html元素
	$.ajax({
	    type : 'GET',
	    contentType : 'application/json',
	    url : '/xiaolian/product/getmodule?systemKey='+systemKey, //呼叫後臺控制類的方法
	    dataType : 'json',	
	    success : function(data) {
	        obj.options.length=0;
		$.each(data.moduleList,function(i,item) {
		    obj.options.add(new Option(item.moduleName,item.moduleKey));
	         });
	    }
        });
    }
</script> 

後面會看看大神關於AJAX的部落格，然後複製過來

發現忘了寫一個重要的方法，就是getmodel()

我們在web層寫這個方法

public Map<String, Object> getmodel(String id,ServletResponse response){
    List<SpePractices> speBeans = ResMngService.SpePracticesList(id);
    Gson gson = new Gson();
        try {
	    response.getWriter().print(gson.toJson(speBeans));
	} catch (IOException e) {
	    e.printStackTrace();
	}
	return null;
}

@RequestMapping("getmodule")
@ResponseBody
public Map<String, Object> getmodule(String systemKey){
    Map<String, Object> modelMap = new HashMap<String, Object>();
    List<copymodule> moduleList = ProService.getModuleListBysystem(systemKey);
    modelMap.put("moduleList",moduleList);
    return modelMap;
}