如何实现一个简单教务系统的课程表查询

一、设计思路

1.     首先做好课程表静态页面(可用Sublime，Dreawvear等开发工具编写，本人用Sublime编写，代码稍后附上)

2.     数据库设计(可用access数据库、sql数据库或者mysql数据库，根据自己习惯选用数据库，本人选用access数据库。注意：连接不同数据库需要不同数据库驱动，自行百度下载)

                                     

课程表效果图

二、课程表实现功能

1.实现select下拉列表的二级联动；

(何为select二级联动:当我在第一个下拉列表选中一个固定的选项之后，第二个下拉列表自动填充相对应选项)

2.实现不同院/系部、不同专业、不同学期的课程表查询

3.读取数据库信息时，使得数据库为null的信息显示在页面上为空字符；

三、实现过程

一.设计界面（附上静态页面代码，页面可根据自己喜好设计）

二.实现select下拉列表的二级联动

附完整代码

步骤解析：

1.      将两个select分别命名为select1和select2，并且分别定义其id为s1和s2，value为s1和s2，同时定义一个函数，代码如下：

<selectname="select1" id="s1" onChange="move()" value=" s1">

<!-- 根据id获取value，onchange（）触发函数move（）修改二级select的text值实现联动 -->

       <option   value="DZ"  selected  value="s1">电子信息学院</option>

       <option   value="JD">机电工程学院</option>

       <option   value="CJ">财经管理学院</option>

       <option   value="GS">工商管理学院</option>

 </select>

 <select name="select2" id="s2" value="s2" >

        <!--默认选中，动态生成option -->

        <option value="j1"selected>16计算机1班</option>

        <option value="j2" >16计算机2班</option>

    </select>

2.      编写move函数(代码附有解释)

function move(){

     vars1=document.getElementById("s1");

     vars2=document.getElementById("s2");

       /*   <!-- 获取一级