由于涉及一些业务内容,所以不过多解释以及贴无关代码了。
任务:点击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=" "
οnclick='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;
实现此功能的关键代码都在其中,仅供参考,希望帮到同样需求的人^_^
转载于:https://blog.51cto.com/mumufairy/1548337