联动选择下拉菜单是我们在开发中经常遇到的问题，一般来讲，三级联动是最为常见的。具体实现方式有很多种：比如每一次下拉选择change的时候发一次ajax请求调数据库加载，或者全部加载信息使用dom方式控制菜单。从性能上来说，第二种实现方式优于第一种，减少了数据库调用次数，并且也能很好地控制菜单显示速度。本文将使用第二种实现方式：
1表设计和准备数据：建立以下数据表并插入示例数据，用于反映学院、专业、班级的三个层级关系，使用lvl和parcode来表示层次关系。
create table grade_tab(
code varchar2(20) primary key,
codenm varchar2(40),
parcode varchar2(20),
lvl varchar2(1)
);
--lvl1 data
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETC', 'Electric', '', '1');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ECO', 'Economics', '', '1');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('STW', 'softwa', '', '1');
--lvl2 data
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETC01', 'Electric automatic', 'ETC', '2');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETC02', 'Electric machintic', 'ETC', '2');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETC03', 'Electric emmbed', 'ETC', '2');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ECO01', 'E-commerce', 'ECO', '2');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ECO02', 'National trade', 'ECO', '2');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('SE', 'Software erginerring', 'STW', '2');
--lvl3 data
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC1', '011007', 'ETC01', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC2', '011008', 'ETC01', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC3', '011009', 'ETC02', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC4', '011010', 'ETC02', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC5', '011011', 'ETC03', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC6', '011012', 'ETC03', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('ETCC7', '011014', 'ETC03', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('STWC1', '011201', 'SE', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('STWC2', '011202', 'SE', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('STWC3', '011203', 'SE', '3');
insert into grade_tab
(code, codenm, parcode, lvl)
values
('STWC4', '011204', 'SE', '3');
2前端页面：
页面将使用ajax作为请求处理技术，同时使用json作为数据传输格式，使用JQuery作为dom操作的主要工具，具体代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>choose</title>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<script src="js/jquery-1.9.0.min.js"></script>
<script>
var lvl1;
var lvl2;
var lvl3;
$(function(){
$.ajax({
type : "POST",
url : "${root}/GradeServ",
dataType : "json",
//data : "method=init",
success : function(data){
lvl1 = data.lvl1;
lvl2 = data.lvl2;
lvl3 = data.lvl3;
var cell1 = $("#lvl1");
for(var i = 0;i<lvl1.length;i++){
var school = lvl1[i];
cell1.append("<option value="+school.code+">"+school.codenm+"</option>");
}
cell1.change(function(){
nextVal("2");
nextVal("3");
})
var cell2 = $("#lvl2");
cell2.change(function(){
nextVal("3");
})
}
})
});
function nextVal(level){
var now_node = $("#lvl"+level);
now_node.empty();
var parcode = $("#lvl"+(level-1)).val();
console.log(parcode);
var list = null;
if(level==2){
list = lvl2;
} else {
list = lvl3;
}
for(var i =0;i<list.length;i++){
var node = list[i];
if(node.parcode==parcode && level==node.lvl){
now_node.append("<option value="+node.code+">"+node.codenm+"</option>");
}
}
if(now_node.find("option").length==0){
now_node.append("<option value='0'>--Choose--</option>");
}
}
</script>
</head>
<body>
<select name='lvl1' id='lvl1'>
<option value='0'>--Choose--</option>
</select>
<select name='lvl2' id='lvl2'>
<option value='0'>--Choose--</option>
</select>
<select name='lvl3' id='lvl3'>
<option value='0'>--Choose--</option>
</select>
</body>
</html>
页面在加载时即发送请求到服务程序，加载所有的层级信息，并将这些信息使用Array形式进行存放。
3.服务端代码
Bean类：
package com.any.grade;
/**
* @ClassName: GradeBean
* @author Helen
*/
public class GradeBean {
private String code;
private String codenm;
private String parcode;
private String lvl;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getCodenm() {
return codenm;
}
public void setCodenm(String codenm) {
this.codenm = codenm;
}
public String getParcode() {
return parcode;
}
public void setParcode(String parcode) {
this.parcode = parcode;
}
public String getLvl() {
return lvl;
}
public void setLvl(String lvl) {
this.lvl = lvl;
}
public GradeBean(String code, String codenm, String parcode, String lvl) {
super();
this.code = code;
this.codenm = codenm;
this.parcode = parcode;
this.lvl = lvl;
}
public GradeBean(){}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((code == null) ? 0 : code.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
GradeBean other = (GradeBean) obj;
if (code == null) {
if (other.code != null)
return false;
} else if (!code.equals(other.code))
return false;
return true;
}
}
使用Servlet作为数据准备程序，用于处理请求并将数据发送给前端页面：
package com.any.grade;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
* Servlet implementation class GradeServ
*/
@WebServlet("/GradeServ")
public class GradeServ extends HttpServlet {
private static final long serialVersionUID = 1L;
private GradeDao gd = new GradeDao();
public GradeServ() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, List<GradeBean>> data = gd.loadData();
List<GradeBean> lvl1 = data.get("lvl1");
List<GradeBean> lvl2 = data.get("lvl2");
List<GradeBean> lvl3 = data.get("lvl3");
JSONArray j_lvl1 = JSONArray.fromObject(lvl1);
JSONArray j_lvl2 = JSONArray.fromObject(lvl2);
JSONArray j_lvl3 = JSONArray.fromObject(lvl3);
String json = "{\"lvl1\":"+j_lvl1.toString()+",\"lvl2\":"+j_lvl2.toString()+",\"lvl3\":"+j_lvl3.toString()+"}";
response.setContentType("text/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().println(json);
}
}
Dao类，查询数据库并将数据通过bean传递：
package com.any.grade;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.any.servlet.DbUtil;
/**
* @ClassName: GradeDao
* @author Helen
*/
public class GradeDao {
private List<GradeBean> getPriGrade(String lvl){
String sql = "select code,codenm,parcode,lvl from grade_tab "
+ "where lvl=? "
+ "and codenm is not null ";
ResultSet rs = DbUtil.executeQuery(sql, lvl);
List<GradeBean> list = new ArrayList<GradeBean>();
try {
while(rs.next()){
list.add(new GradeBean(rs.getString("code"),
rs.getString("codenm"),
rs.getString("parcode"),
rs.getString("lvl")));
}
return list;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
public Map<String, List<GradeBean>> loadData(){
Map<String, List<GradeBean>> data = new HashMap<String, List<GradeBean>>();
List<GradeBean> lvl1 = getPriGrade("1");
List<GradeBean> lvl2 = getPriGrade("2");
List<GradeBean> lvl3 = getPriGrade("3");
data.put("lvl1", lvl1);
data.put("lvl2", lvl2);
data.put("lvl3", lvl3);
return data;
}
}
数据库工具类，用于连接数据库并执行SQL，返回对应的结果：
package com.any.servlet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DbUtil {
private static String url="jdbc:oracle:thin:@localhost:1521:orcl";
private static String user="scott";
private static String password="tiger";
private static Connection conn;
private static Connection getConnection(){
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn=DriverManager.getConnection(url, user, password);
return conn;
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
public static int executeUpdate(String sql,Object... params){
PreparedStatement pmst = null;
try {
pmst = getConnection().prepareStatement(sql);
for (int i = 0; i < params.length; i++) {
pmst.setObject(i+1, params[i]);
}
return pmst.executeUpdate();
} catch (SQLException e) {
try {conn.rollback();} catch (SQLException e1) {e1.printStackTrace();}
e.printStackTrace();
}
return -1;
}
public static ResultSet executeQuery(String sql,Object... params){
PreparedStatement pmst = null;
try {
pmst = getConnection().prepareStatement(sql);
for (int i = 0; i < params.length; i++) {
pmst.setObject(i+1, params[i]);
}
return pmst.executeQuery();
} catch (SQLException e) {
try {conn.rollback();} catch (SQLException e1) {e1.printStackTrace();}
e.printStackTrace();
}
return null;
}
public static void closeConnection(){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
经过以上步骤，就初步完成了三级联动选择菜单的制作。在页面加载时，必须首先选择第一层级下拉选项，从而进行后续选项的选择。
相关推荐
在Web应用中，三级联动下拉菜单常用于地理信息选择，如国家-省份-城市。DWR允许我们通过JavaScript在客户端动态更新下拉菜单选项，当用户在一个菜单中做出选择时，根据选择的值，DWR会自动向服务器发送请求，获取并...
ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单，通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中，例如电商平台、在线论坛等。 在这个例子中，我们可以看到，三级...
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
总结起来，"html+js实现地区三级联动下拉菜单"是一种常见的前端交互设计，它利用HTML的`<select>`元素和JavaScript的事件监听及DOM操作实现地区选择的动态更新。这个示例代码简洁高效，适用于各种Web项目，并且提供...
"jQuery全国高校三级联动下拉选择菜单代码" 是一种实现高效用户界面的技术应用，主要用于让用户在选择学校时能快速找到目标，通过省、市、校三级联动的方式，使信息查找更为便捷。这个项目利用了JavaScript库jQuery...
全国省市区三级联动下拉菜单是一种常见的前端交互设计，它在网页或应用程序中用于选择地址时，用户可以依次从省、市、区三个级别的下拉菜单中选择，以实现快速定位。这种设计常见于电子商务、物流配送、信息录入等多...
三级联动下拉菜单是指当用户在一个下拉菜单中选择一个选项时，第二个和第三个下拉菜单会根据所选的选项自动更新其内容。这种联动效果通常基于JavaScript实现，通过监听第一个下拉菜单的change事件，然后根据用户的...
6. **MultilevelSelect-5265.rar**："MultilevelSelect"直译为多级选择，这可能是一个专门的多级联动下拉菜单插件或库，5265可能是项目ID或版本号。 7. **ajax.zip**：这个可能是一个基本的AJAX实现的下拉菜单，ZIP...
实现三级联动下拉菜单的关键在于，当用户在一个下拉菜单中选择一个选项时，系统会自动更新下一个下拉菜单的内容，以反映所选选项的相关子级。在这个例子中，我们可能有国家、省份和城市三个级别的数据，每个级别的...
### 年、月、日三级联动下拉菜单的实现原理及代码解析 #### 一、概述 在网页应用中，为了提高用户体验并简化用户输入，经常需要实现年、月、日三级联动的选择功能。这种功能通常用于表单中的日期选择器，通过下拉...
在IT开发领域，尤其是Web应用开发中，"省市县(区)三级联动下拉菜单"是一种常见的功能设计，主要用于用户选择地理位置。这种设计通常涉及到前端的JavaScript交互以及后端数据库的配合。本资源提供了一个完整的解决...
在网页设计中，为了提供用户友好的交互体验，常常需要实现各种动态效果，其中一种常见的需求就是三级联动下拉选择菜单。这个压缩包“jQuery全国高校三级联动下拉选择菜单代码.zip”提供了一套完整的解决方案，适用于...
在中国地区三级联动下拉菜单的实现中，我们通常指的是在网页表单中创建一个选择器，用户可以从省级、市级和区县级三个级别的列表中选择地址，这三个列表之间存在联动关系。这种功能常见于用户注册、填写收货地址等...
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
在网页设计中，交互性是提升用户体验的关键因素之一，而JS+HTML联动下拉菜单则是实现这一目标的有效手段。这种菜单允许用户通过选择一个选项来影响另一个下拉菜单的显示内容，为用户提供更加直观和高效的导航体验。...
基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar
在网页设计中，二级联动下拉菜单是一种常见的交互元素，常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互，其中PHP作为后端语言，负责处理数据并返回给前端。本篇文章将详细介绍如何...
本示例资源"melist多级联动下拉菜单可中文检索.rar"提供了一种实现高效、易用的多级联动下拉菜单的方法，特别适合需要层级结构选择的场景，如导航菜单、地区选择等。下面将详细介绍这个解决方案的关键知识点。 首先...
Access中窗体实现二级联动下拉示范，用VBA配合SQL查询来做rowsource，实现二级下拉跟着一级内容变化，如果一级内容没有选择，二级显示所有