不用json文件不用数据库存储实现三级联动

浏览数：24 / 时间：2015年06月12日

碰到一个好困惑的问题，怎么用简单易懂的方法实现三级联动呢？？！！编写json文件？格式不太容易写的json文件，还有迷人的遍历。。使用数据库存储数据？来回增删改查真实麻烦。。。。琢磨了好几天，原来只需要简单的jquery语法就可以实现了，顿时令人头晕的问题解决了，真好！

下面是我写的一个小示例：

(1)首先是一点小说明：

首先要引入一个jquery.js文件，使用到的几个基本方法参考帮助文档便可理解什么意思；

其次要应该知道：一个学院下面有多个不同的专业，一个专业下面有多个不同的班级，所以应该先根据学院来选择专业，然后根据专业选择班级。未选择院系则不能选择专业，为选择专业则不能选择班级。

比如：

软件学院包括软件工程、网络工程，软件工程有java1班、java2班，网络工程有网络1班、网络2班

计算机学院包括操作系统、数据结构，操作系统有操作1班、操作2班，数据结构有数据1班、数据2班

..............

(2)jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta charset="UTF-8">

<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery.js"></script>

</head>
<body>
<form action="">
学院:
<select name="college" id="college">
    <option value="0" selected="selected">请选择学院</option>
    <option value="1">软件学院</option>
    <option value="2">计算机学院</option>
</select>
<br><br>

专业:
<select name="department" id="department">
    <option value="0">请选择专业</option>
</select>
<br><br>

班级:
<select name="classes" id="classes">
    <option value="0">请选择班级</option>
</select>
<br><br>
<input type="submit" value="ok">
</form>


<script type="text/javascript">
$(function(){
    
    //给“院系”绑定事件，根据选择的不同设置相应的专业
    $("#college").change(function(){
        var collegeVal = $("#college").val();    
            if(collegeVal == ‘0‘){
                $("#department").empty();
                $("#department").append(‘<option value="0" selected="selected">请选择专业</option>‘);
            }else if(collegeVal == ‘1‘){
                $("#department").empty();
                $("#department").append(‘<option value="0" selected="selected">请选择专业</option>‘);
                $("#department").append(‘<option value="1">软件工程</option>‘);
                $("#department").append(‘<option value="2">网络工程</option>‘);
            }else if(collegeVal == ‘2‘){
                $("#department").empty();
                $("#department").append(‘<option value="0" selected="selected">请选择专业</option>‘);
                $("#department").append(‘<option value="1">操作系统</option>‘);
                $("#department").append(‘<option value="2">数据结构</option>‘);
            }else{
                
            }
            
    });
    
    
    //给“专业”绑定事件，根据选择的不同设置相应的班级
    $("#department").change(function(){
        
        var departmentVal = $("#department").val();
        var collegeVal = $("#college").val();
            if(departmentVal == ‘1‘ && collegeVal == ‘1‘){
                $("#classes").empty();
                $("#classes").append(‘<option>请选择班级</option>‘);
                $("#classes").append(‘<option>java1班</option>‘);
                $("#classes").append(‘<option>java2班</option>‘);
            }else if(departmentVal == ‘2‘ && collegeVal == ‘1‘){
                $("#classes").empty();
                $("#classes").append(‘<option>请选择班级</option>‘);
                $("#classes").append(‘<option>网络1班</option>‘);
                $("#classes").append(‘<option>网络2班</option>‘);
                
            }else if(departmentVal == ‘1‘ && collegeVal == ‘2‘){
                $("#classes").empty();
                $("#classes").append(‘<option>请选择班级</option>‘);
                $("#classes").append(‘<option>操作1班</option>‘);
                $("#classes").append(‘<option>操作2班</option>‘);
                
            }else if(departmentVal == ‘2‘ && collegeVal == ‘2‘){
                $("#classes").empty();
                $("#classes").append(‘<option>请选择班级</option>‘);
                $("#classes").append(‘<option>数据1班</option>‘);
                $("#classes").append(‘<option>数据2班</option>‘);
                
            }            
            else{
                $("#classes").empty();
                $("#classes").append(‘<option value="0" selected="selected">请选择班级</option>‘);                
            }
                        
        });
    
});
</script>
</body>
</html>