<%@ 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 = 0i <one.lengthi ++)
{
str += "<option>" + one[i] + "</option>"
}
}
else if(selBox.value == "B")
{
for(var i = 0i <two.lengthi ++)
{
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>
简单一点儿的实现，不用ajax.你的两个下拉框里面的数据很少，可以在网页生成的时候直接从数据库读出，以数组的形式生成字符串，拼进javascript里面。如： [["js","vbs"],["vb","java"]]根据第一个下拉框选择的内容确定数组索引，把相应索引动态添加到第二个下拉框中。
jsp页面可以利用Ajax来获取数据库数据来：在第一级列表的onchange事件中编写：
//投诉信息来源信息级联
function getTsFromDescribe(ts_describe){
var tsfrom = $("#t_tsfrom").val()
var tstsFrom = $("#ts_tsFrom").val()
Ext.Ajax.request( {
url : '${ctx}/complaints/complaints!getTsFrom.action',
params : {
tsfrom : tsfrom//通过json形式将前台每次获取到的值传递给后台
},
success : function(response) {
var json = Ext.util.JSON.decode(response.responseText)
if (json.success) {
var data = json.<strong>cmList</strong>
if ("" == data) {
alert("请选择投诉类型")
inputForm.t_tsfrom.focus()
$("#ts_tsFrom").empty()//每次需要将上一次的数据进行清空
} else {
$("#ts_tsFrom").empty()
//对获取到的数据进行迭代
for ( var i = 0i <data.lengthi++) {
var id = data[i]
var name = data[i]
$("#ts_tsFrom").append(
"<option value='" + id + "'>" + name + "</option>")
}
dwr.util.removeAllOptions('tstsFrom')
dwr.util.addOptions('tstsFrom', data)
}
}
}
})
}
后台返回数据：
public void getTsFrom() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse()
String ts_names = tsfrom
List<CustomManage>list = complaintsmanager.getTsDescribe(ts_names)
response.setContentType("text/javascript")// 后台控制的代码
PrintWriter writer = response.getWriter()
// 将得到的list集合转为JSON对象传给前台处理
JSONArray j = JSONArray.fromObject(list)
writer.println("{'success':true,'<strong>cmList</strong>':" + j.toString() + "}")
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）