网页下拉框联动

最新推荐文章于 2023-01-05 11:10:32 发布

苦的是咖啡

最新推荐文章于 2023-01-05 11:10:32 发布

阅读量6.6k

点赞数

分类专栏： js 文章标签： html js jsp

本文链接：https://blog.csdn.net/javacattle/article/details/40424297

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页下拉框联动，即第一个下拉框内容改变，则与之联动的另一个下拉框的内容也随之改变。这个功能javascript（以下简称js）或者jsp都可以实现，不过根据笔者经验，除非万不得已，能够利用js实现的话就尽量不要使用jsp，因为js是静态语言，执行不需要和服务器联系，不论在速度上还是稳定性上都有很大的优越性。下面就以js实现之。

下拉框的条目内容如果是事先确定的并且数量较少，那么可以事先定义两个数组，将下拉框的条目内容存进去，为了实现上的方便，你可以利用下标对照进行存储，当然，你也可以用别的方法，只要可以做到第一级下拉框和二级的条目对应起来就行了。我们以下标对照存储为例。

比方说第一级下拉框的内容为A,B,C;当选定A时，二级下拉框内容为11，22，33，选定B时，二级下拉框内容为44，55，66，选定C时，二级下拉框内容为77，88，99；这样的话我们定义的两个数组为：

var quanbu1 = new Array(A,A,A,B,B,B,C,C,C);

var quanbu2 = new Array(11,22,33,44,55,66,77,88,99);

但是其实大部分情况的联动下拉框中的条目是从数据库中取出来的，这个时候就需要先从数据库中取出数据，然后再将所有的条目内容放到这两个静态数组中去，以后的联动就不需要刷新页面，完全是js静态的了。利用jsp连接数据库并且取数据这里就不细说了，反正取出来的是一个resultset，假设名字是rs，下面就是将rs中的数据放入静态数组的语句，这里一级和二级下拉框条目放在rs的第一、第三列。

var quanbu1 = new Array();

var quanbu2 = new Array();

int i = 0;

while(rs.next())

{

//初始化为实现下拉列表联动的静态数组

lenlen = <%= i + 1%>;//静态数组长度

quanbu1[<%= i %>] = "<%= rs.getString(1).trim() %>";

quanbu2[<%= i %>] = "<%= rs.getString(3).trim() %>";

i++;

}

</script>

初始化下拉条目数组之后，你可以构造第一级和第二级下拉框了，这我就不细说了，你只要记着定义第一级它的onchage函数指向你定义的js函数就可以了，例如：

第一级下拉框：

</select>

第二级下拉框：

</select>

下面是实现联动的changelist函数：

function changelist()

{ //取第一级下拉框当前内容

var first=document.formone.hexi.options[document.formone.hexi.selectedIndex].value;

var yumenlen;//二级下拉框条目数

var m = 0;

var n = 0;

while(quanbu1[n] != null){

if(quanbu1[n] == first){

yumen [m] = quanbu2[n];//构造当前二级下拉框条目内容数组

m++;

}

n++;

}

yumenlen = m;

parent.topFrame.document.all.cezhan.length=0;//清空二级下拉框条目

for(var i=0;i<yumenlen;i++)

{//构造下拉条目

var lastOption = document.createElement_x("OPTION");

document.all.cezhan.options.add(lastOption);

lastOption.innerText =yumen[i];

lastOption.value=yumen[i];

}

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*,online.*" errorPage="" %>
<jsp:useBean id="DBConn" class="online.DBConn" scope="session"></jsp:useBean>
<%
DBConn db=new DBConn();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'MyJsp.jsp' starting page</title>
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
ResultSet rs = db.executeQuery("select * from chapter order by chapterID");//读取数据
while(rs.next())
{
    String P1=rs.getString("courseName");;//转换字符类型
String P2=rs.getString("chapterName");
%>
subcat[<%=count%>] = new Array("<%=P2%>","<%=P1%>","<%=P2%>");//产生数组
<%
        count = count + 1;
}
%>
onecount=<%=count%>;

function change(id)
    {
    document.form.P2.length = 0;

    var id=id;
    var i;
    document.form.P2.options[0] = new Option('--选择--','');
    for (i=0;i < onecount; i++)
        {
    var p=subcat[i][1];
    if(p==id)
    {
                document.form.P2.options[document.form.P2.length] = new Option(subcat[i][0], subcat[i][2]);
    }
        }
    document.form.P2.focus();
    }

</script>

</head>

<body>
<form name="form">
分类：
<select name="P1" onChange="change(document.form.P1.options[document.form.P1.selectedIndex].value)">
<option value="">--选择--</option>
<%
String sql = "select * from course order by courseID asc";
ResultSet rs1 = db.executeQuery(sql);
while(rs1.next())
{
String P1=rs1.getString("courseName");
%>
<option value="<%=P1%>"><%=P1%></option>
<%
}
%>
</select>
<select name="P2" >
<option value="">==选择==</option>
</select>
</form>
<%
db.close();
%>
</body>
</html>