用JSP实现下拉列表框三级联动效果

Posted on 2006-12-20 15:03 flustar 阅读(4501) 评论(4)  编辑  收藏 所属分类: J2ee

一、在数据库数据库中建立三个表
1.city
字段:
districtname,locationid,districtid
2.province
字段:
locationid,locationname
3.village
字段:
villageid,villagename,districtid
二、代码如下:
<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="gb2312"%>
<%@ page import="java.sql.* "%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jsp实现三级联动的下拉列表框效果</title>
<%
   Connection conn=null;
   Statement stmt=null;
   ResultSet rs=null,rs1=null,rs2=null;
   String sql;
   int count;
   int count2;
   String drivername="com.microsoft.jdbc.sqlserver.SQLServerDriver";
   String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=SJLD";
   try{
    Class.forName(drivername);
    conn=DriverManager.getConnection(url,"sa","");
    stmt=conn.createStatement();
    sql="select * from city order by locationid asc";
    rs=stmt.executeQuery(sql);
   }catch(SQLException e){
    System.out.println(e.getMessage());
   }
  
%>
<script language="javascript">
var onecount;
onecount=0;
subcat=new Array();
<%
count=0;
while(rs.next()){
 %>
 subcat[<%=count%>]=new Array("<%=rs.getString("districtname")%>","<%=rs.getInt("locationid")%>","<%=rs.getInt("districtid")%>");
 <%
 count = count + 1 ;

}
rs.close();
rs=null;
%>
onecount=<%=count%>;
function changelocation(locationid){
document.myform.smalllocation.length=0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0]=new Option('==所选城市的地区==','');
for(i=0;i<onecount;i++){
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]);
}
}

  
}
</script>
<%
 sql="select * from village order by districtid asc";
 rs2=stmt.executeQuery(sql);
%>
<script language="javascript">
var onecount2;
onecount2=0;
subcat2=new Array();
<%
count2=0;
while(rs2.next()){
 %>
 subcat2[<%=count2%>]=new Array("<%=rs2.getString("villagename")%>","<%=rs2.getInt("districtid")%>","<%=rs2.getInt("villageid")%>");
 <%
 count2 = count2 + 1 ;

}
rs2.close();
rs2=null;
%>
onecount2=<%=count2%>;
function changelocation2(districtid)
{
document.myform.village.length = 0;

var districtid=districtid;
var j;
document.myform.village.options[0] = new Option('==所选地区的县区==','');
for (j=0;j < onecount2; j++)
{
  if (subcat2[j][1] == districtid)
 {
  document.myform.village.options[document.myform.village.length] = new Option(subcat2[j][0], subcat2[j][2]);
  }
}

}
</script>

</head>
<body>
<form name="myform" method="post">
分类:<select name="biglocation" onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)" size="1">
<option selected>请选择你所在的省份</option>
<%
  sql ="select * from province order by locationname asc";
 rs1 = stmt.executeQuery(sql);
 while(rs1.next()){
 %>
 <option value="<%=rs1.getInt("locationid")%>"><%=rs1.getString("locationname")%></option>

 <% }
 
 
 rs1.close();
 rs1 = null;
 conn.close();
 conn =null;


%>
</select><select name="smalllocation" onChange="changelocation2(document.myform.smalllocation.options[document.myform.smalllocation.selectedIndex].value)">
<option selected value="">==所有地区==</option>
</select><select name="village" size="1">
<option selected>==所有县区==</option>
</select>
</form>

</body>
</html>

Feedback

# re: 用JSP实现下拉列表框三级联动效果  回复  更多评论   

2007-06-06 17:39 by Carja
能运行吗?我看蛮好的!

# re: 用JSP实现下拉列表框三级联动效果  回复  更多评论   

2007-09-18 10:18 by Vivion
谢谢楼主分享!

# re: 用JSP实现下拉列表框三级联动效果  回复  更多评论   

2007-11-11 12:38 by programmer
真的很好,先谢谢了哦

# re: 用JSP实现下拉列表框三级联动效果  回复  更多评论   

2008-05-02 21:10 by 让我慢慢的靠近你 以后告诉你
可不可以只建一张表啊?加我QQ哈 564757891 我爱你~!! 呵呵

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 146, comments - 143, trackbacks - 0, articles - 0

Copyright © flustar