·4·
基于
JavaScript和
PHP的多级联动下拉菜单的
设计与实现
2007年
基于JavaScript和PHP的多级联动下拉菜单
DesignandIplementationofMultilevelCorrelativePull-downmMenubasedonJavaScriptandPHP
段寿建张旭洁胡绍波李忠态云南师范大学昆明650092【摘要】主要讨论在基于BS结构的管理信息
系统中,如何用JavaScript和PHP实现多级联动下拉菜单。给出了关联数据表的设计方法、
程序设计的基本思路和程序代码的关键部分,实践证明该方法能很好地实现BS结构的管理信息系统中的多级联动下拉菜单。【关键词】联动下拉菜单,JavaScript,PHP,MySQL
ABSTRACTThepaperdiscusseshowtoiplementmultilevelcorrelativepull2downmenuusingJavaScriptandPHPunderBSmdemonstratesthemethodbyasample(College,subjectandclass)1KEYWORDSCorrelativemenu,JavaScript,PHP,MySQL
MySQL相结合来开发各种动态页面。所以采用MySQL数据库中的数据表来存储菜单项,建立表(College)、专业表(Subject)、班级表(Team),结构如表1、表2、表3所示。
表1表(College)
类型
varchar(2)varchar(40)
modelMIS1Thepaperpresentsthedesignofmultilevelcorrelativedatatableandthepivotalpartofprogram,andthen
JavaScript的基础上加入PHP和MySQL技术,菜单的所有选项都保存在MySQL数据表中的,表中用主键和外
中图分类号:TP311152
字段
collegeidcollegename
文献标识码:A
在管理信息系统中,下拉菜单(也称下拉
列表框)是一种
常用的控件,它可以简化用户的输入操作,限制输入内容,特别适用于枚举数据类型。联动下拉菜单是指上一个下拉菜单的选择项影响后一个下拉菜单的可选项,它们是相关联的。例如在学生管理信息系统中,做学生基本信息维护时会有“、专业、班级”三个属性,一个有多个,一个有多个专业,一个专业又有多个班级,对于像这样的一对多关系中,使用联动菜单能简化用户的输入,可以使整个系统的逻辑清楚简洁。当选定一个后,在专业的下拉菜单中只显示属于该的相关专业,这样就不必把所有的专业都显示出来。同样,在选定专业时,班级下拉菜单中只显示属于该专业的班级,而不必显示整个的所有班级。这是一个在学生
管理系统中常用到的三级联动菜单,类似的联动菜单应用还有很多,如省、市、县三级联动等。在基于BS结构的管理信息系统中,对于系统开发者而言,要在
web上要构建多级联动下拉菜单,没有理想的现成控件可以直接使用,一般情况下,开发人员可以在
HTML中嵌入JavaScript来实现,但用它们写出的菜单结构内容一般比较固定,若想添加新的菜单项(如增加、专业、班级)、修改某个菜单项的内容(如、专业、班级改名)、删除已有菜单项(如删除、专业、班级)就要修改程序
源代码,这就给系统的后期维护或升级带来诸多不便。要解决以上
问题,我们在键来关联菜单内容,用PHP提供的数据库操作命令来完成关联。这样,对于菜单项的添加、修改和删除就可以用phpMyAdmin,也可以用PHP编制菜单管理程序来维护。因此,这样一个动态联动菜单将会使系统具有良好的适应性。下面就以“、专业、班级”三级联动下拉菜单为例,介绍设计思路和具体的实现方法。