首先實現jquery ajax的二級聯動 要下載個jquery.js 我在這里就不准備了 自行百度下載
背景介紹:通過部門的ID來查找部門下的所有班級
我實現二級聯動的思路是:先查詢所有部門 顯示在頁面上 如圖 :
其次在使用下拉框的點擊事件 獲取到省的ID ,然后通過省的ID 進行查找城市。
jsp代碼
<select style="width:85px" onchange="findCity()" id="provinceId">
<option value="0">請選擇</option>
<c:forEach var="item" items="${provinceList}">
<option value="${item.pid}">${item.pname }</option>
</c:forEach>
</select>
<select style="width:85px" id="cityId">
<option value="0">請選擇</option>
</select>
js部分代碼:
function findCity(){
var provinceId=$("#provinceId").attr("value");
$.ajax({
type : "get",
url : "{pathContext.request.contextPath}/provinceCity",
data : {"provinceId" : provinceId},
success : function(data){
$("#cityId option").remove();
$("#cityId").append("<option value='0' >請選擇</option>");
var cityList=data.citys;
for(i in cityList){
$("#cityId").append("<option value ="+cityList[i].cid+">"+cityList[i].cname+"</option>");
}
}
});
}
action部分代碼(截圖):
struts.xml配置
數據庫表:
province表:
city表:
最終效果:
總結:
我感覺還有一種思路:
在點擊新建時,直接把所有的省,城市全部查出,並且把省名傳入前台select
當選擇省的時候,觸發onchange事件,通過ajax的方法,直接拼接出對應的城市
但是由於時間問題,暫時先不做了