<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
一般都要加JavaScript实现联动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>
