jsp三级级联下拉框
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 ;
Java 代码
1. <script type="text/javascript" src="${pageContext.request.contextPath}
/script/config/freqCell.js"></script>
2. <script type="text/javascript">
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.smal
</head> <body> <form name="myform" method="post"> 分类：<select name="biglocation" onChange="changelocation(document.myform.biglocation.options[document.myform.biglocat ion.selectedIndex].value)" size="1"> <option selected>请选择你所在的省份</option> <%
16.
17.
var option = "";
18.
19.
// 循环组装下拉框选项
20.
$.each(data, function(k, v)
21.
{
22.
option += "<option value=\"" + v['internetID'] + "\">
" + v['hnbName'] + "</option>";
$("#internetId").append(option);
}, error : function(msg, textStatus, e) {
alert("当前登录用户失效，请重新登录。"); window.location = path + "/login.jsp"; } });
JSP 代码实现：
} 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++) {
25.
$("#internetID").change(function()
26.
{
27. 28. 29. 30. 31. 32. 33. 34. 35. 36. }
show_freqHnbInfo($(this).val()); }); }, error : function(msg, textStatus, e) { alert("当前登录用户失效，请重新登录。"); window.location = path + "/login.jsp"; } });
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> <%
8.
data : 'id=' + ss,
9.
success : function(msg)
10.
{
11.
// 清空表格
12.
$("#internetID").empty();
13.
14.
// 转换成 json 对象
15.
var data = JSON.parse(msg);
16.
17.
var option = "<option value=\"\">请选择...</option>";
3.
var type = "${type }";
4.
var path = "${pageContext.request.contextPath}";
llocation.selectedIndex].value)"> <option selected value="">==所有地区==</option> </select><select name="village" size="1"> <option selected>==所有县区==</option> </select> </form>
if (subcat2[j][1] == districtid)
{ document.myform.village.options[document.myform.village.length] = new
Option(subcat2[j][0], subcat2[j][2]); }
}
} </script>
} </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.get Int("villageid")%>"); <% count2 = count2 + 1 ;
一、在数据库数据库中建立三个表 1.city 字段： districtname，locationid，districtid 2.province 字段： locationid，locationname 3.village 字段： villageid,villagename,districtid 二、代码如下： <%@ page language="java" contentType="text/html; charset=gb2312"
上面是 1 级下拉列表框的实现，下面是二级下拉列表框的实现。
Java 代码
1. function show_freqHnbInfo(internetId)
2. {
3.
var ss = Math.random();
4.
$.ajax(
5.
{
6.
type : 'POST',
7.
url : 'getAllHnbOnlineOutByOne',
</body> </html>
JQuery 实现级联下拉菜单
博客分类： jquery
Java 代码
1. function show_hnbInfo()
2. {
3.
var ss = Math.random();
4.
$.ajax(
5.
{
6.
Fra Baidu bibliotektype : 'POST',
7.
url : 'getAllHnbInfo',
} 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]); } }
23.
});
24.
25.
if (internetId == "" || internetId == null || internetId =
= undefined)
26.
{
27.
option += "<option value=\"\">请选择...</option>";
28.
}
29.
30. 31. 32. 33. 34. 35. 36. 37. 38. 39. }
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){
18.
19.
// 循环组装下拉框选项
20.
$.each(data, function(k, v)
21.
{
22.
option += "<option value=\"" + v['internetID'] + "\">
" + v['hnbName'] + "</option>";
23.
});
24.
$("#internetID").append(option);
8.
data : 'id=' + ss + '&internetId=' + internetId,
9.
success : function(msg)
10.
{
11.
// 清空表格
12.
$("#internetId").empty();
13.
14.
// 转换成 json 对象
15.
var data = JSON.parse(msg);