springMVC 表單聯動處理 點擊radio聯動改變select選項

由於涉及一些業務內容,所以不過多解釋以及貼無關代碼了。

任務:點擊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="&emsp;"
				 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;
	

實現此功能的關鍵代碼都在其中,僅供參考,希望幫到同樣需求的人^_^

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章