springMVC 表单联动处理 点击radio联动改变select选项

标签：radio   select   spring mvc   联动   

由于涉及一些业务内容，所以不过多解释以及贴无关代码了。

任务：点击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;
	

实现此功能的关键代码都在其中，仅供参考，希望帮到同样需求的人^_^

本文出自 “木木在路上” 博客，请务必保留此出处http://mumufairy.blog.51cto.com/6184508/1548337

springMVC 表单联动处理 点击radio联动改变select选项

标签：radio   select   spring mvc   联动   

原文地址：http://mumufairy.blog.51cto.com/6184508/1548337