基于JQuery的Select下拉框联动（级联）
这段时间在指导学生完成实训项目，由一个用到了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.id+"'>"+json.name+"</option>");}},'json');}$(function(){//初始化教师下拉框$.post("parentSelect",null,function(json){for(var i=0;i<json.length;i++){//添加一个教师$(".parent").append("<option value='"+json.id+"'>"+json.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;}}
仅以此文献给所有跟我学习没有学会的同学们！
页:
[1]