JSP下拉框二级联动
一级和二级的下拉列表的值都需要从数据库读取的article表是这样的varitycolourA白色，绿色，黑色B黑色，蓝色，灰色C红色，黄色，紫色如有要求一级下拉列表选中...
一级和二级的下拉列表的值都需要从数据库读取的
article表是这样的
varity colour
A 白色，绿色，黑色
B 黑色，蓝色，灰色
C 红色，黄色，紫色
如有要求一级下拉列表选中A，二级就自动生成白色，绿色，黑色三个选项，这个要怎么实现呢？ 展开
article表是这样的
varity colour
A 白色，绿色，黑色
B 黑色，蓝色，灰色
C 红色，黄色，紫色
如有要求一级下拉列表选中A，二级就自动生成白色，绿色，黑色三个选项，这个要怎么实现呢？ 展开
2个回答
展开全部
当然是Ajax来实现啊。
网上到处都有例子的，使用Ajax的框架DWR,JQuery等等。。。。
网上到处都有例子的，使用Ajax的框架DWR,JQuery等等。。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<%
/*
级联菜单形式，最好由ajax做，那样页面显示的更友好，现在使用javascript演示
已经测试通过，具体操作请按情况区别。
*/
/*-------------------------Method----------------------------*/
/*第一级菜单 封装成Map集合，方便页面取值*/
Map<String,String> mapOne = new HashMap<String,String>();
mapOne.put("A","A");
mapOne.put("B","B");
%>
<!-- 该javascript用来生成二级联动菜单 -->
<script type="text/javascript">
/*声明两个数组，以便区别，具体操作，应该是通过底层返回一个list*/
var one = new Array("白色","红色","黄色");
var two = new Array("黑色","蓝色","灰色");
/*该函数，控制二级级联操作*/
function specieSelChange(selBox)
{
/*
这些数据需要重数据库中取，我没有连接数据库，所以自己拟定数据，数据封装根据具体情况而定
这是第二级菜单，需要级联的菜单
*/
var str = "<select>";
if(selBox.value == "A")
{
for(var i = 0; i < one.length; i ++)
{
str += "<option>" + one[i] + "</option>";
}
}
else if(selBox.value == "B")
{
for(var i = 0; i < two.length; i ++)
{
str += "<option>" + two[i] + "</option>";
}
}
str += "</select>";
document.all('Linkage').innerHTML = str;
}
</script>
</head>
<body>
<!-- 页面开始解析数据 首先是第一个下拉框-->
<table border="0" align="center" style="font-size: 12px;">
<tr>
<td>请选择种类:</td>
<td>
<!-- 页面使用循环取出数据 如果需要更标准，请使用jstl标签，或者struts标签 -->
<select id="SpecieSel" onchange="specieSelChange(this)">
<%
Iterator it = mapOne.entrySet().iterator();
while(it.hasNext()){
Map.Entry entry = (Map.Entry)it.next();
%>
<option value="<%=(String)entry.getKey() %>">
<%=(String)entry.getValue() %>
</option>
<%} %>
</select>
</td>
</tr>
<!-- 第二个下拉框，开始执行二级联动 -->
<tr>
<td>
二级联动下拉框:
</td>
<td id="Linkage">
<!-- 该下拉框，使用自动生成 -->
<select>
<option>---请选择---</option>
</select>
</td>
</tr>
</table>
</body>
</html>
<%@ page import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<%
/*
级联菜单形式，最好由ajax做，那样页面显示的更友好，现在使用javascript演示
已经测试通过，具体操作请按情况区别。
*/
/*-------------------------Method----------------------------*/
/*第一级菜单 封装成Map集合，方便页面取值*/
Map<String,String> mapOne = new HashMap<String,String>();
mapOne.put("A","A");
mapOne.put("B","B");
%>
<!-- 该javascript用来生成二级联动菜单 -->
<script type="text/javascript">
/*声明两个数组，以便区别，具体操作，应该是通过底层返回一个list*/
var one = new Array("白色","红色","黄色");
var two = new Array("黑色","蓝色","灰色");
/*该函数，控制二级级联操作*/
function specieSelChange(selBox)
{
/*
这些数据需要重数据库中取，我没有连接数据库，所以自己拟定数据，数据封装根据具体情况而定
这是第二级菜单，需要级联的菜单
*/
var str = "<select>";
if(selBox.value == "A")
{
for(var i = 0; i < one.length; i ++)
{
str += "<option>" + one[i] + "</option>";
}
}
else if(selBox.value == "B")
{
for(var i = 0; i < two.length; i ++)
{
str += "<option>" + two[i] + "</option>";
}
}
str += "</select>";
document.all('Linkage').innerHTML = str;
}
</script>
</head>
<body>
<!-- 页面开始解析数据 首先是第一个下拉框-->
<table border="0" align="center" style="font-size: 12px;">
<tr>
<td>请选择种类:</td>
<td>
<!-- 页面使用循环取出数据 如果需要更标准，请使用jstl标签，或者struts标签 -->
<select id="SpecieSel" onchange="specieSelChange(this)">
<%
Iterator it = mapOne.entrySet().iterator();
while(it.hasNext()){
Map.Entry entry = (Map.Entry)it.next();
%>
<option value="<%=(String)entry.getKey() %>">
<%=(String)entry.getValue() %>
</option>
<%} %>
</select>
</td>
</tr>
<!-- 第二个下拉框，开始执行二级联动 -->
<tr>
<td>
二级联动下拉框:
</td>
<td id="Linkage">
<!-- 该下拉框，使用自动生成 -->
<select>
<option>---请选择---</option>
</select>
</td>
</tr>
</table>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
