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

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

代码要点：

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

$("筛选符").append("显示文字")

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

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

    或者是

$(".child").empty()

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

$(".parent").val()

下面是示例JSP页面全文：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


"Content-Type" content="text/html; charset=UTF-8">
"pragma" content="no-cache"/>
"cache-control" content="no-cache"/>
"expires" content="0"/>
基于JQuery的下拉框级联操作
"text/javascript" src="js/jquery-1.4.4.min.js">
"text/javascript">
function changChild(tid){
    $.post("childSelect",{"tid":tid},function(json){
        $(".child").html("");//清空学生下拉框
        for(var i=0;i
            //添加一个学生
            $(".child").append("+json[i].id+"'>"+json[i].name+"");
        }
    },'json');
}
$(function(){
    //初始化教师下拉框
    $.post("parentSelect",null,function(json){
        for(var i=0;i
            //添加一个教师
            $(".parent").append("+json[i].id+"'>"+json[i].name+"");
        }
        changChild($(".parent").val());
    },'json');
    //注册教师下拉框事件
    $(".parent").change(function(){
        changChild($(this).val());
    });
});



使用JQuery进行下拉框的联动

    改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。


class="parent">
class="child">

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

public class SelectChangeAction {
    private static List teachers = new ArrayList();
    private static List students = new ArrayList();
    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 list = new ArrayList();
        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;
    }
}