由於涉及一些業務內容,所以不過多解釋以及貼無關代碼了。
任務:點擊radio單選框選定,動態聯動刷新select中的可選items。
前臺js:
function getRooms(){ var location = GetRadioValue('location'); $.ajax({ type: "POST", url: "${ctx}/oa/meeting/getRooms", data: { //發送給數據庫的數據 location: location }, dataType: 'json', success: function(data) { $("#meetingRoom").empty(); $.each(data, function(index,item){ $("#meetingRoom").append("<option class='required' value='"+item.id+"'>"+item.name+"</option>") }); } }) } /*獲得被check的radio的值*/ function GetRadioValue(RadioName){ var obj; obj = document.getElementsByName(RadioName); if (obj != null) { var i; for (i = 0; i < obj.length; i++) { if (obj[i].checked) { return obj[i].value; } } } return null; }
採用spring MVC表單的jsp:
<div class="control-group"> <label class="control-label">所屬區域<font color="red" size="4">*</font>:</label> <div class="controls"> <form:radiobuttons path="location" items="${allLocations}" delimiter=" " onclick='getRooms()'/> </div> </div> <div class="control-group"> <label class="control-label">會議室<font color="red" size="4">*</font>:</label> <div class="controls"> <form:select path="room" id="meetingRoom"> <form:option value="" label="請選擇"/> <form:options items="${allRooms}" itemLabel="name" itemValue="id" htmlEscape="false" class="required"/> </form:select> </div> </div>
controller中的函數,根據前臺request查詢並返回json數據
@RequestMapping(value="getRooms") public @ResponseBody List<Room> getRooms(String location){ String locat = location; try { locat = URLDecoder.decode(location, "UTF-8"); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); } List<Room> rooms = roomService.findByLocation(locat); return rooms;
實現此功能的關鍵代碼都在其中,僅供參考,希望幫到同樣需求的人^_^