基于JQuery的Select下拉框联动（级联）

最新推荐文章于 2022-02-14 17:35:56 发布

原创最新推荐文章于 2022-02-14 17:35:56 发布 · 781 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #json #JavaScript #Ajax #Cache #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JQuery实现下拉框的联动效果。通过AJAX请求动态更新子下拉框选项，适用于多级联动场景。包含示例代码及服务端实现。

这段时间在指导学生完成实训项目，由一个用到了JQuery进行下拉框（select）联动（添加删除option）的操作，本来在上课中都是讲过的，但时间一长都忘光了，下面把这段简单的JS贴出来，给入门者一个DEMO吧，以后有学生不会写的时候他能到这找到参考。

代码要点：

1、使用JQuery给select标签添加option元素时，直接使用：

$("筛选符").append("<option value='隐藏值'>显示文字</option>")

2、清空select中所有元素可以使用：

$(".child").html("")

或者是

$(".child").empty()

3、获取select标签选择值时用：（直调用val()方法即可）

$(".parent").val()

下面是示例JSP页面全文：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<title>基于JQuery的下拉框级联操作</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function changChild(tid){
	$.post("childSelect",{"tid":tid},function(json){
		$(".child").html("");//清空学生下拉框
		for(var i=0;i<json.length;i++){
			//添加一个学生
			$(".child").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");
		}
	},'json');
}
$(function(){
	//初始化教师下拉框
	$.post("parentSelect",null,function(json){
		for(var i=0;i<json.length;i++){
			//添加一个教师
			$(".parent").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");
		}
		changChild($(".parent").val());
	},'json');
	//注册教师下拉框事件
	$(".parent").change(function(){
		changChild($(this).val());
	});
});
</script>
</head>
<body>
<h3>使用JQuery进行下拉框的联动</h3>
<p>
	改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。
</p>
<hr/>
<select class="parent"></select>
<select class="child"></select>
</body>
</html>

服务端是用Struts的一个Action，使用Json-lib将数据转化成json字符串：（见全文）

public class SelectChangeAction {
	private static List<Teacher> teachers = new ArrayList<Teacher>();
	private static List<Student> students = new ArrayList<Student>();
	private int tid;
	static{
		Teacher teacher = null; 
		Student student = null;
		for(int i=0;i<10;i++){
			teacher = new Teacher();
			teacher.setId(i);
			teacher.setName("教师【"+i+"】");
			for(int j=0;j<10;j++){
				student = new Student();
				student.setId(j);
				student.setName(teacher.getName()+"的学生【"+i+"|"+j+"】");
				student.setTeacher(teacher);
				students.add(student);
			}
			teachers.add(teacher);
		}
	}
	
	/**
	 * 输出教师信息
	 * @return
	 */
	public String parent(){
		String json = JSONArray.fromObject(teachers).toString();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		try {
			response.getWriter().write(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 输出学生信息
	 * @return
	 */
	public String child(){
		List<Student> list = new ArrayList<Student>();
		for (Student student : students) {
			if(student.getTeacher().getId() == tid){
				list.add(student);
			}
		}
		String json = JSONArray.fromObject(list).toString();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		try {
			response.getWriter().write(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
	public int getTid() {
		return tid;
	}
	public void setTid(int tid) {
		this.tid = tid;
	}
}

仅以此文献给所有跟我学习没有学会的同学们！