首页 > 代码库 > 不用json文件不用数据库存储实现三级联动
不用json文件不用数据库存储实现三级联动
碰到一个好困惑的问题，怎么用简单易懂的方法实现三级联动呢？？！！编写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="http://www.mamicode.com/js/jquery.js"></script></head><body><form action="">学院:<select name="college" id="college"> <option value="http://www.mamicode.com/0" selected="selected">请选择学院</option> <option value="http://www.mamicode.com/1">软件学院</option> <option value="http://www.mamicode.com/2">计算机学院</option></select><br><br>专业:<select name="department" id="department"> <option value="http://www.mamicode.com/0">请选择专业</option></select><br><br>班级:<select name="classes" id="classes"> <option value="http://www.mamicode.com/0">请选择班级</option></select><br><br><input type="submit" value="http://www.mamicode.com/ok"></form><script type="text/javascript">$(function(){ //给“院系”绑定事件，根据选择的不同设置相应的专业 $("#college").change(function(){ var collegeVal = $("#college").val(); if(collegeVal == ‘0‘){ $("#department").empty(); $("#department").append(‘<option value="http://www.mamicode.com/0" selected="selected">请选择专业</option>‘); }else if(collegeVal == ‘1‘){ $("#department").empty(); $("#department").append(‘<option value="http://www.mamicode.com/0" selected="selected">请选择专业</option>‘); $("#department").append(‘<option value="http://www.mamicode.com/1">软件工程</option>‘); $("#department").append(‘<option value="http://www.mamicode.com/2">网络工程</option>‘); }else if(collegeVal == ‘2‘){ $("#department").empty(); $("#department").append(‘<option value="http://www.mamicode.com/0" selected="selected">请选择专业</option>‘); $("#department").append(‘<option value="http://www.mamicode.com/1">操作系统</option>‘); $("#department").append(‘<option value="http://www.mamicode.com/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="http://www.mamicode.com/0" selected="selected">请选择班级</option>‘); } }); });</script></body></html>
(3)最后的小说明：
在把以上数据提交到数据库中时，除了班级是正常的中文提交，院系、专业这两个字段提交的是字符串0、1、或2，所以在插入之前可以进行相应的转换，只需要记清楚012代表的含义即可。
(4)效果展示
不用json文件不用数据库存储实现三级联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。