在一个jsp页面实现二级下拉框联动,实时读取数据库数据
android客户端二级下拉框级联操作
android客户端⼆级下拉框级联操作在项⽬中，为了提⾼⽤户的体验效果，我们会⽤到级联操作，在android中关于下拉框的级联操作，我们可以使⽤Spinner。
关于Spinner，来⾃官⽅⽂档是这样介绍的：A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the associatedwith this view。
简⽽⾔之就是is a widget similar to a drop-down list for selecting items.这次项⽬中的需求是这样的，⽤户选择⼀个城市，⼆级下拉框⾃动获取该城市下的所有区/县,下⾯分布讲解。
1. 对于android应⽤程序⽽⾔，布局时是不可缺少的，很重要，就在第⼀点来讲，采⽤两个LinearLayout布局，第⼀个LinearLayout采⽤垂直⽅向总体布局，第⼆个LinearLayout采⽤⽔平⽅向对说明信息进⾏⼦节点布局View Code2. 这⾥主要在Activity中对布局⽂件进⾏操作。
1. 对⼀些信息的声明：//市区/⼦菜单项信息private String[][] areaData = CityCountry.areaData;private ArrayAdapter<CharSequence> adapterArea = null;//spinner城市private Spinner mCity = null;//spinner县区private Spinner mCountry = null;2. 获得Spinner对象:// spinner下拉列表框⼆级菜单级联mCity = (Spinner) super.findViewById(R.id.city);mCountry = (Spinner) super.findViewById(R.id.area);3. 注册Spinner setOnItemSelectedListener监听事件:mCity.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener(){@Overridepublic void onItemSelected(AdapterView<?> arg0, View arg1, int position, long arg3){// 表⽰选项改变的时候触发MppspPhoneAlarmAct.this.adapterArea = new ArrayAdapter<CharSequence>(MppspPhoneAlarmAct.this,// 定义所有的列表项yout.simple_spinner_item, MppspPhoneAlarmAct.this.areaData[position]);// 设置⼆级下拉列表的选项内容MppspPhoneAlarmAct.this.mCountry.setAdapter(MppspPhoneAlarmAct.this.adapterArea);}@Overridepublic void onNothingSelected(AdapterView<?> arg0){}});3. 部分效果图如下：。
excel制作2级联动下拉菜单
数据录入的时候，经常需要用到两级下拉菜单，并且需要联动，输入完第一级内容之后，第二级的内容是对应的
效果如下所示：
制作过程也非常简单，只需要几步就可以完成
1、准备数据源
第一行中的数据，输入一级下拉菜单中的内容
从第二行开始，依次向下输入一级菜单对应的二级菜单的内容
2、使用名称管理器创建字段
我们选中所有的数据区域
按CTRL+G，调出定位条件
然后在定位条件里面，选择常量
然后，我们选择公式选项卡
点击根据所选内容创建，只勾选首行，然后点击确定
通过这一步操作，其实我们就是将第一行的数据做为字段，将下面的数据作为引用的区域，创建了名称组
3、制作下拉菜单
我们选中第一列A列，然后点击数据，点击数据验证
选择序列
数据来源，我们选择，之前的第一行的数据，也就是表1的A1:E1的数据
这样就制作好了一级下拉菜单
然后选中B列，同样的使用数据验证，但是数据来源，我们输入的是公式：=INDIRECT(A1)
也就是间接引用A列对应的值
所以当我们A2输入的内容是浙江的时候，B2引用的就是浙江这个数据组，因为我们第2步创建了名称管理器，指定了浙江数据组是下面的数据，所以二级下拉菜单就会对应显示
4、开放数据源
如果我们有需求，但左边的数据新增的时候，二级联动下拉菜单能自动的更新数据，不需要重新再次设置
那就需要做个简单的设置
依次选中每列的数据源区域，然后依次按CTRL+T，将它转成智能表格
然后当我们在下方新增数据的时候，下拉菜单就可以自动的扩充数据了。
完全用ASP实现二级联动
完全用ASP实现二级联动jacksq0位粉丝1楼这里用到了两个asp文件：1.asp和2.asp1.asp源代码：<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ASP实现二级联动</title></head><body><script language="javascript" type="text/javascript">function sel(){var sel1=document.form1.select1.value;if(sel1!="=====请选择====="){document.form1.action="7.asp?id="+document.all.select1.value;document.form1.method="post";document.form1.submit();}}</script><%ch1=Request.QueryString("id")ch2=cint(Request.QueryString("page"))dim myarray(250)for i=1 to ch2temp="c"&cstr(i)myarray(i)=Request.Form(temp)nextch3=Request.QueryString("state")set conn=server.CreateObject("ADODB.Connection")db=server.MapPath("../ChinaStateTable/City.mdb")conn.Open "driver={microsoft access driver (*.mdb)};dbq="&dbset rst=Server.CreateObject("ADODB.RecordSet")sql="select distinct state from city order by state"rst.open sql,conn,1,1,1m=rst.RecordCount%><form name="form1" method="post" action=""><label><select name="select1" onChange="javascript:sel();"><option value="=====请选择=====">=====请选择=====<%if ch1=2 thenfor i=1 to mif ch3=rst("state") thenresponse.Write("<option value='"&rst("state")&"'selected>"&rst("state")&"") rst.MoveNextelseresponse.Write("<option value='"&rst("state")&"'>"&rst("state")&"")rst.MoveNextend ifnextelsefor i=1 to mresponse.Write("<option value='"&rst("state")&"'>"&rst("state")&"")rst.MoveNextnextend if%></select></label>省<br><label><select name="select2"><option value="=====请选择=====">=====请选择=====<%if ch1="2" thenfor i=1 to ch2temp="c"&cstr(i)my=Request.Form(temp)response.Write("<option value='"&my&"'>"&my&"</option>")nextend if%></select></label>市</form><%rst.closeset rst=Nothingconn.Closeset conn=Nothing%></body></html>2.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// /TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><body><%ch1=Request.QueryString("id")set conn2=server.CreateObject("ADODB.Connection")db=server.MapPath("../ChinaStateTable/City.mdb")conn2.Open "driver={microsoft access driver (*.mdb)};dbq="&dbset rst2=Server.CreateObject("ADODB.RecordSet")sql="select city from city where state='"&ch1&"'"rst2.open sql,conn2,1,1,1n=rst2.RecordCount%><form id="form1" name="form1" method="post" action="6.asp?id=2&page=<%res ponse.write(cstr(n))%>&state=<%response.write(ch1)%>"><%for i=1 to nnam="c"&cstr(i)Response.Write("<input type='hidden'name='"&nam&"' value='"&rst2("city")&"'>" )rst2.MoveNextnextrst2.closeset rst2=nothingconn2.closeset conn2=nothing%></form><script language="javascript">document.form1.submit();</script></body></html>此源代码为本人原创。
使用Java+JSP+JavaScript实现多级下拉菜单
（ 华南理工大学 计算机软件学院， 广东 揭 阳 ５２３ ） ２０ １
【 要】 摘 任何 涉及菜单较 多的业务 系统 ， 化菜单的展现 ， 优 减 少登录时等待 的时间都是很有必要 的。 常 ＣＳ结构 下实现的下 通 拉 菜单需要 读取 全菜单 ， 以某种格式组织在一起 并展现 。 文章介
据一定 的循环调用算法 ， 生成 ＪＰ页面上显示 的源代码 ， Ｓ 并打印 出来 ， 形成最终 的下拉菜单结果 。
二、 关键 算法 简介
１ ．从数据库取得 菜单数据集 ， 生成 可排序 ， 并且包含 菜单 真正路径的数据集合 的遍历算法简介 ： 步骤一 ： 从数据库取得符合条件 的以下字段 的数据集 ： 节点 Ｉ 节点名称 ， Ｄ， 父节点 Ｉ 热键字符 ， 捷键 ， Ｄ， 快 是否终结菜单 。 步骤二 ： 遍历初始数据集一次 ， 决捷键扩展为 ４位 ， 籽 节点 Ｉ Ｄ 扩展为 ５位 ， 并将快捷键 ， 是否终结菜单 ， 节点名称合并在节点名 称字段中。本次遍历 目的是生成两个结果集 ：节点 Ｉ （ Ｄ，父节点 Ｉ ＴｅＭａ 结果集 ， （ Ｄ）ｒｅ ｐ 以及 节点 Ｉ 节点名称 ）ｒｅ ｐ结果集。 Ｄ， ＴｅＭａ 步骤三 ： 遍历 （ 节点 Ｉ 父节点 Ｉ Ｔ ｅＭａ Ｄ。 Ｄ）ｒ ｐ结果集 一次 ， ｅ 以
绍了一种使 用 ｌ ａＪＰ ＪｖＳｒ ｔ ａ ＋ Ｓ ＋ ａａｃ ｐ 实现 的多级 下拉 菜单 ， 以在 ｖ ｉ 可
单： 如果有 ， 继续第 二层数组遍历 ； 否则 ， 印该 菜单 页面代码 。 打 菜单项采用 ＩＲ Ｅ的格式 ， Ｆ ＡＭ 确保菜单项 的独立性 ， 并且加入菜 单项 页面菜单调用 函数 ， 如果该菜单 项也是非 叶子菜单 ， 则加入 调用非叶子菜单 函数 ｎｄＬ ｆ ｎ （ ， ， ｏ ｅｅ Ｍｅｕ ＡＢ）如果该 菜单 项是叶子 ｔ 菜单则加入调用叶子菜单函数 ｎｄＶｅ （ ，，） ｏｅ ｉ ＡＢ０ 。如果第二层菜 ｗ 单也是非 叶子菜单 ， 则继续遍历第三层 ， 并判 断菜单是否 叶子菜 单， 按照上述处理方式 调用 ｎｄ Ｌｆ ｅｕ ） ｏｅ ｅ Ｍ ｎ （或者 ｎｄＶ ｅ （ｏ最 ｔ ｏｅ ｉ ｗ 后， 将页面代码打 印处理 。
Combobox下拉框两级联动
Combobox下拉框两级联动下拉框的两级联动是我们开发中经常遇到⼀种情况。
⽐如⼀个学⽣管理系统中，根据年级、科⽬及姓名查询学⽣考试成绩，年级和科⽬都是硬盘中的有限数据（数据库）⽽学⽣则可以有⽤户⼿动指定，这时在数据库中有年级和科⽬两张表，每门科⽬都对应⼀个年级，所以我们可以⽤两个下拉框（Combobox）来存储年级和科⽬信息来供⽤户选择。
界⾯如下：这时如果我们将科⽬对应的下拉框直接绑定科⽬表时，⽤户选择⼀个年级后还要从所有科⽬中进⾏选择就会降低系统的友好性，甚⾄可能出现没有任何意义的查询语句。
我们可以先绑定年级下拉框的数据。
在年级下拉框中的SelectedIndexChange事件中获取年级下拉框中的数据（编号）在⽤得到的数据（年级编号）去查科⽬表，将对应的科⽬信息绑定到科⽬下拉框。
model展开1 int gradeid = Convert.ToInt32(cboGrade.SelectedValue);//获取选定的年级编号 2 3 List list= subjectBll.GetAllSubject(gradeid);//查询指定年继编号下对应的科⽬信息 4 //绑定科⽬下拉框 5 cboSubject.ValueMember = "subjectid"; 6 cboS 返回顶部收缩 1 int gradeid = Convert.ToInt32(cboGrade.SelectedValue);//获取选定的年级编号23 List <Subject> list= subjectBll.GetAllSubject(gradeid);//查询指定年继编号下对应的科⽬信息4 //绑定科⽬下拉框5 cboSubject.ValueMember = "subjectid";6 cboSubject.DisplayMember = "subjectname";7 cboSubject.DataSource = list;下拉框的SelectedValue属性属性原型：常见错误：错误分析：经过实验可以确认将绑定数据源的代码放在属性设置的后边是可以解决这个错误的，个⼈觉得是如果先绑定数据源的话系统会⾃动将valuemember的属性值设置为绑定的集合的类型之后再设置Valuemember时系统不会再对其进⾏更改！。
简单的JSP二级联动菜单
简单的JSP⼆级联动菜单本代码通过测试说明：⼀级栏⽬表。
这⾥是硬编码在⽂件中了。
⼆级栏⽬表ablum,⾥⾯有员⼯的信息：姓名(albuj_name)，id(album_id),所属部门id(type_id)<%@ include file="../data.jsp" %><%@ page contentType="text/html;charset=gb2312" %><% request.setCharacterEncoding("gb2312"); %><html><head><title>添加个⼈资源</title><head><body bgcolor="#ffffff" text="#000000"><%Rst=null;String sql="select * from ablum order by type_id asc";Rst=Stmt.executeQuery(sql);%><script type="text/javascript">var onecount;onecount=0;subcat = new Array();<%int count = 0;while(Rst.next()){%>subcat["<%=count%>"] = newArray('<%=Rst.getString("album_name")%>','<%=Rst.getString("album_id")%>','<%=Rst.getString("type_id")%>'); <%count++;}Rst.close();%>onecount="<%=count%>";function change(locationid){document.myform.albumid.length = 0;var location_id=locationid;var length=0;var i;for(i=0;i<onecount;i++){if (subcat[i][2] == location_id) {document.myform.albumid.options[length++] = new Option(subcat[i][0], subcat[i][1]);}}}</script><%=count %><form method="POST" name="myform" action="adminsave.jsp"><table><tr> <td>⼀级分类</td><TD> <select name="typeId" onChange="change(document.myform.typeId.options[document.myform.typeId.selectedIndex].value);" size=1><option selected>==请选⼀级分类==</option><option value="1">经理室</option>;<option value="2">经理室1</option>;<option value="3">经理室2</option>;<option value="4">经理室3</option>;<option value="5">经理室4</option>;<option value="6">经理室5</option>;<option value="17">经理室6</option>;<option value="7">经理室7</option>;<option value="8">经理室8</option>;<option value="9">经理室9</option>;<option value="10">经理室10</option>;<option value="11">经理室11</option>;<option value="12">经理室12</option><option value="13">经理室13</option>;<option value="14">经理室14</option>;<option value="15">经理室15</option>;<option value="16">经理室16</option>;<option value="18">经理室17</option>;</select> </TD><TD>选择⼆级分类</TD> <TD><select name="albumid"><option selected>==请选⼆级分类==</option> </select></td></tr></table></forum></html>。
asp二级联动下拉菜单
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>会员登录</title>
</head>
<body>
<script language ="javascript" >
<td height="30" bgcolor="#D4D0C8"><select size="1" name="Region" onchange ="changeselect(document.form1.Region.options[document.form1.Region.selectedIndex].value)">
set rs = conn.execute(sql)
while not rs.eof
msg = msg & "<option value=""" & rs("id") & """>" & rs("class1") & "</option>"
下拉框数据回显到文本的方法
下拉框数据回显到文本的方法要实现下拉框数据回显到文本的功能，可以按照以下步骤进行操作：1. 创建一个下拉框控件，并设置其选项值和显示文本。
例如：```<select id="mySelect"><option value="1">选项一</option><option value="2">选项二</option><option value="3">选项三</option></select>```2. 创建一个文本框控件，并设置其初始值为空。
例如：```<input type="text" id="myText" value="">```3. 使用JavaScript代码实现下拉框数据回显到文本的功能。
具体实现方法如下：```// 获取下拉框和文本框的DOM对象var select = document.getElementById("mySelect");var text = document.getElementById("myText");// 给下拉框添加change事件监听器select.addEventListener("change", function() {// 将选中的下拉框值赋给文本框text.value = select.options[select.selectedIndex].text;});```4. 在页面加载完成后，调用一次上述代码，以便初始化文本框的值。
例如：```window.onload = function() {// 初始化文本框的值为第一个选项text.value = select.options[0].text;};```通过以上步骤，就可以实现将下拉框的选中值回显到文本框中，从而提高用户体验和操作便捷性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在一个jsp页面实现二级下拉框联动，实时读取数据库数据，这个方法非常使用，只需要修改很小的地方就可以使用。
设计的文件，serch.jsp，main.js，bytetostr.js，
先讲一下main.js，这是javascript，其中注意修改jsp页面名称。
function findObject(fName,initValue)...{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST","searchmx.jsp?findObject="+fName+"&initValue="+initValue,false);//注意修改jsp页面
xmlhttp.send();
document.getElementById(fName).innerHTML=bytes2BSTR(xmlhttp.responsebody); //bytes2BSTR函数在bytetostr.js中
}
其次为bytetostr.js，这是vbscript，这个不需要修改任何内容，他的主要功能就是读取数据转换字符串用的。
Function bytes2BSTR(vIn)
dim i
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
End Function
接下来就是serch.jsp页面，只需要修改div中的id为你想要的名字，再将一开始的包更换一下，已经sql语句改下就可以了，有不明白的可以参与讨论
<%@ page contentType="text/html; charset=gb2312" language="Java"
import="com.sjth.zdsygl.vo.*,.*,java.util.*,com.sjth.zdsygl.jdbc.*,java.sql.ResultSet"%>//导入相应的包<%
//这部分代码用于执行查询数据库，返回字符串
if (request.getParameter("findObject")!=null)...{
if (request.getParameter("findObject").equals("hy_dm"))...{
DBConnect conn = null;
ResultSet rs = null;
try...{
out.print("<select name='hy_dm' onchange="javascript:findObject('hymx_dm',this.value)">");
String sql = "select * from dm_hy group by left(hy_dm,7)";
conn = new DBConnect();
conn.setPstmt(sql);
rs = conn.executeQuery(sql);
while(rs.next())...{
out.print("<option value='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
}
out.print("</select>");
}
catch (Exception e)...{
}
finally...{
try...{
if (rs != null)
rs.close();
if (conn != null)
conn.close();
}
catch (Exception e)...{
e.printStackTrace();
}
}
}
if (request.getParameter("findObject").equals("hymx_dm"))...{
DBConnect conn = null;
ResultSet rs = null;
try...{
out.print("<select name='hymx_dm' >");
String sql = null;
if (request.getParameter("initValue").equals(""))...{
sql = "select * from dm_hy";
}
else...{
sql = "select * from dm_hy where hy_dm like '"+request.getParameter("initValue")+"%'";
}
conn = new DBConnect();
conn.setPstmt(sql);
rs = conn.executeQuery(sql);
while(rs.next())...{
out.print("<option value='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
}
out.print("</select>");
}
catch (Exception e)...{
}
finally...{
try...{
if (rs != null)
rs.close();
if (conn != null)
conn.close();
}
catch (Exception e)...{
e.printStackTrace();
}
}
}
return;
}
%>
<html>
<head>
<link href="Css/table.css" type="text/css" rel="stylesheet">
<script language=vbscript src="css/bytetostr.js"></script>
<script language=javascript src="css/main.js"></script>//导入两个js文件</head>
<body>
<div>所属行业：</div>
<div id="hy_dm"></div> //用来显示返回的字符串
<div >所属明细行业：</div>
<div id="hymx_dm"></div>//用来显示返回的字符串
</body>
</html>
<script language="javascript">
findObject("hy_dm","");
findObject("hymx_dm","");//这两条是页面执行是调用
</script>。