SQL数据库:
==大类:字段名称-数据类型-长度-允许空
(主键) id--int--4--N
school_id--int--4--N
name--char--20--N
==小类:字段名称-数据类型-长度-允许空
(主键) id--int--4--N
class_name--char--20--N
v_school--char--8--N
数据库添加内容:-------------------
==大类:
id--school_id--name
1 1大类1
2 2大类2
3 3大类3
==小类:
id--class_name--v_school
1 小类1-1 1
2 小类1-2 1
3 小类2-1 2
4 小类2-2 2
5 小类3-1 3
6 小类3-2 3
实现代码:-----------------------
<!--#include file="conn.asp"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<%
A = request.Form("anclassid")
B = request.Form("Nclassid")
if request.Form("Submit")="提交" then
response.Write "a="&A
response.Write "<br>b="&B
response.End()
end if
dim count
set rs=server.createobject("adodb.recordset")
'--------取出小类里的数据,Nclassidorder:小类在大类里的ID号
rs.open "select * from class order by id ",conn,1,1%>
<script language = "JavaScript">
var onecount
onecount=0
subcat = new Array()
<%
count = 0
do while not rs.eof
%>
<!---读出数据存入数组,第一位:class_name是小类名称,第二位:v_school是小类在大类里的ID号,三位:小类ID----->
subcat[<%=count%>] = new Array("<%= trim(rs("class_name"))%>","<%= rs("v_school")%>","<%= rs("id")%>")
<%
count = count + 1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>
function changelocation(locationid)
{
document.myform.Nclassid.length = 0
var locationid=locationid
var i
for (i=0i <onecounti++)
{
if (subcat[i][1] == locationid)
{ //这句不是很理解
document.myform.Nclassid.options[document.myform.Nclassid.length] = new Option(subcat[i][0], subcat[i][2])
}
}
}
</script>
<body>
<table cellpadding="3" cellspacing="1" border="0" width="100%" class="tableBorder" align=center>
<tr height=25>
<th class="tableHeaderText" colspan=6 height=25></th>
</tr>
<tr>
<td class="forumRowHighlight" >
<table align=center>
<form name="myform" method="post" action="test.asp" OnSubmit="return checkkk()" >
<tr>
<td width="8%"></td>
<td colspan="2">
<p>
<%
rs.open "select * from school order by school_id",conn,1,1
'-----------列出大类数据
if rs.eof and rs.bof then
response.write "请先添加栏目。"
response.end
else
%>
大类:
<select name="anclassid" size="1" id="anclassid" onChange="changelocation(document.myform.anclassid.options[document.myform.anclassid.selectedIndex].value)">
<!--第一个:school_id是大类ID,第二个name是大类名称 -------------->
<option selected value="<%=rs("school_id")%>"><%=trim(rs("name"))%></option>
<% dim selclass
'--------selclass是临时赋值器,小类展开时会用到
selclass=rs("school_id")
rs.movenext
do while not rs.eof
%>
<option value="<%=rs("school_id")%>"><%=trim(rs("name"))%></option>
<%
rs.movenext
loop
end if
rs.close
%>
</select>小类:<select name="Nclassid">
<!---- 查找小类里同上selclass值相同的数据------->
<%
rs.open "select * from class where v_school="&selclass ,conn,1,1
if not(rs.eof and rs.bof) then %>
<!---- id:小类ID,第二个是小类名称------->
<option selected value="<%=rs("id")%>"><%=rs("class_name")%></option>
<%
rs.movenext
do while not rs.eof
%>
<option value="<%=rs("id")%>"><%=rs("class_name")%></option>
<%
rs.movenext
loop
end if
rs.close
set rs = nothing
%>
</select>
</p>
</td>
</tr>
</form>
</table>
</body>
</html>
用js先写个带参方法,参数就是2级联动的对象obj
写个ajax data参数就是obj.value, value传给后台获取数据返回给ajax,
然后ajax做你想做的页面处理。。。
<script language="javascript">
function getData(obj) {
var opt = obj.options[obj.selectedIndex]
//alert("The option you select is:"+opt.text+"("+opt.value+")")
$.ajax({
url : "你的url",
type : "Post",
data : 'diqu='+opt.value,
success : function(data1) {
//这里面就可以得到你后台获取过来的数据了,你可以做DOM处理
}
})
}
</script>
<SELECT onchange="getData(this)">
<OPTION value ="1">湖北</OPTION>
<OPTION value="2">湖南</OPTION>
<OPTION value ="3">河北</OPTION>
<OPTION value="4">河南</OPTION>
</SELECT>