如何使用Dreamweaver制作二级联动菜单?

html-css07

如何使用Dreamweaver制作二级联动菜单?,第1张

一般都要加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>

用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>