如何实现一个页面两个SELECT的动态关联
<html><head><scriptlanguage=javascript>functionact(selectedIndex)//SelectclassOnChang...
<html>
<head>
<script language=javascript>
function act(selectedIndex) //Selectclass OnChange事件
{ var e = document.form.selectname;
for (var i=e.options.length; i>=0; i--) e.remove(i); //清空selectname里的内容
}
</script>
</head>
<body>
<form name="form">
<select name="selectclass" OnChange="act(this.selectedIndex)">
//从数据库中读取相应信息并初始化Select里Options的值
<option>请选择部门</option>
<%!List lt; %>
<% try{
sqltools t=new sqltools();//与数据库建立连接
lt=t.getUsers("select DISTINCT bumen from DPOWER where DPOWER='0'");
//执行该SQL语句获得想要的值并放入LIST类型的表中
Iterator it = lt.iterator();
while ( it.hasNext()) {
String next = (String)it.next();
%>
<option value="<%=next%>"><%=next%></option>//初始化下拉项
<%}}catch(Exception e){}
%>
</select>
<select name=selectname size="7">//这个Select下拉框想要与上面那个下拉框联系起来，当selectclass改变选项时，更新Selectname里的选项，最好是能动态关联，且不刷新页面
<%!List lt1; %>
<%
try{
sqltools t1=new sqltools();//与数据库建立连接
lt1=t1.getUsers1("select elsename from DPOWER where DPOWER='0' and bumen='"+sql+"'" );//执行该SQL语句获得想要的值并放入LIST类型的表中
Iterator it1 = lt1.iterator();
while ( it1.hasNext()) {
String next1 = (String)it1.next();
%>
<option value="<%=next1%>"><%=next1%></option>
<%}}catch(Exception e){}
%>
</select>
</body>
</html> 展开
<head>
<script language=javascript>
function act(selectedIndex) //Selectclass OnChange事件
{ var e = document.form.selectname;
for (var i=e.options.length; i>=0; i--) e.remove(i); //清空selectname里的内容
}
</script>
</head>
<body>
<form name="form">
<select name="selectclass" OnChange="act(this.selectedIndex)">
//从数据库中读取相应信息并初始化Select里Options的值
<option>请选择部门</option>
<%!List lt; %>
<% try{
sqltools t=new sqltools();//与数据库建立连接
lt=t.getUsers("select DISTINCT bumen from DPOWER where DPOWER='0'");
//执行该SQL语句获得想要的值并放入LIST类型的表中
Iterator it = lt.iterator();
while ( it.hasNext()) {
String next = (String)it.next();
%>
<option value="<%=next%>"><%=next%></option>//初始化下拉项
<%}}catch(Exception e){}
%>
</select>
<select name=selectname size="7">//这个Select下拉框想要与上面那个下拉框联系起来，当selectclass改变选项时，更新Selectname里的选项，最好是能动态关联，且不刷新页面
<%!List lt1; %>
<%
try{
sqltools t1=new sqltools();//与数据库建立连接
lt1=t1.getUsers1("select elsename from DPOWER where DPOWER='0' and bumen='"+sql+"'" );//执行该SQL语句获得想要的值并放入LIST类型的表中
Iterator it1 = lt1.iterator();
while ( it1.hasNext()) {
String next1 = (String)it1.next();
%>
<option value="<%=next1%>"><%=next1%></option>
<%}}catch(Exception e){}
%>
</select>
</body>
</html> 展开
2个回答
推荐于2017-09-27 · 知道合伙人数码行家
可以叫我表哥
知道合伙人数码行家
采纳数：25897
获赞数：1464975
2010年毕业于北京化工大学北方学院计算机科学与技术专业毕业，学士学位，工程电子技术行业4年从业经验。
向TA提问 私信TA
关注
![]()
展开全部
实现一个页面的两个select的联动关联，主要就是使用makeshi这个函数，onchange里传递所选中的值，然后根据该值来判断显示数组里的值。以一个页面内的选择一个地区，后面会自动筛选细分地区为例，代码参考以下：
<head>
<meta http-equiv="Content-Type" ontent="text/html; charset=gb2312" />
<title>表单元素[select下拉列表]制作二级联动菜单</title>
<script language="javascript">
//下面函数是演示二，联动菜单的处理代码
function makeshi(x){
var form2=document.diqu.one.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
diqul[i]=new Array();//子循环
//下面是给每个循环赋值
var shi=document.diqu.shi;//方便引用
diqul[0][0]=new Option("绵阳","绵阳");
diqul[0][1]=new Option("成都","成都");
diqul[0][2]=new Option("广元","广元");
diqul[1][0]=new Option("盐城","盐城");
diqul[1][1]=new Option("苏州","苏州");
diqul[1][2]=new Option("常州","常州");
diqul[2][0]=new Option("南宁","南宁");
diqul[2][1]=new Option("柳州","柳州");
diqul[2][2]=new Option("北海","北海");
diqul[3][0]=new Option("杭州","杭州");
diqul[3][1]=new Option("温州","温州");
diqul[3][2]=new Option("义乌","义乌");
for(m=shi.options.length-1;m>0;m--)
shi.options[m]=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
shi.options[j]=new Option(diqul[x][j].text,diqul[x][j].value)
//注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
}
shi.options[0].selected=true;//设置被选中的初始值
}
</script>
</head>
<body>
<p><strong>演示二：地区二级无刷新联动菜单</strong></p>
<form id="form2" name="diqu" method="post" action="">
<select name="one" size="1" onchange="makeshi(options.selectedIndex)">
<option value="0">四川</option>
<option value="1">江苏</option>
<option value="2">广西</option>
<option value="3">浙江</option>
</select>
<select name="shi">
<option value="绵阳">绵阳</option>
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="广元">广元</option>
<option value="南充">南充</option>
</select>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" ontent="text/html; charset=gb2312" />
<title>表单元素[select下拉列表]制作二级联动菜单</title>
<script language="javascript">
//下面函数是演示二，联动菜单的处理代码
function makeshi(x){
var form2=document.diqu.one.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
diqul[i]=new Array();//子循环
//下面是给每个循环赋值
var shi=document.diqu.shi;//方便引用
diqul[0][0]=new Option("绵阳","绵阳");
diqul[0][1]=new Option("成都","成都");
diqul[0][2]=new Option("广元","广元");
diqul[1][0]=new Option("盐城","盐城");
diqul[1][1]=new Option("苏州","苏州");
diqul[1][2]=new Option("常州","常州");
diqul[2][0]=new Option("南宁","南宁");
diqul[2][1]=new Option("柳州","柳州");
diqul[2][2]=new Option("北海","北海");
diqul[3][0]=new Option("杭州","杭州");
diqul[3][1]=new Option("温州","温州");
diqul[3][2]=new Option("义乌","义乌");
for(m=shi.options.length-1;m>0;m--)
shi.options[m]=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
shi.options[j]=new Option(diqul[x][j].text,diqul[x][j].value)
//注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
}
shi.options[0].selected=true;//设置被选中的初始值
}
</script>
</head>
<body>
<p><strong>演示二：地区二级无刷新联动菜单</strong></p>
<form id="form2" name="diqu" method="post" action="">
<select name="one" size="1" onchange="makeshi(options.selectedIndex)">
<option value="0">四川</option>
<option value="1">江苏</option>
<option value="2">广西</option>
<option value="3">浙江</option>
</select>
<select name="shi">
<option value="绵阳">绵阳</option>
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="广元">广元</option>
<option value="南充">南充</option>
</select>
</form>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.可以把关联数据按照一定格式写入XML然后用java脚本加载，实现级联.
2.如要实现无刷新提取数据，老办法是用一个隐藏的IFRARM加载一个处理页面，返回值重写加载SELECT.
3.新办法是用AJAX异步调用实现无刷新动态加载select.
2.如要实现无刷新提取数据，老办法是用一个隐藏的IFRARM加载一个处理页面，返回值重写加载SELECT.
3.新办法是用AJAX异步调用实现无刷新动态加载select.
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
