有一个小要求和普通的二级级联菜单不同,
普通的二级菜单,比如你在windows桌面右击鼠标,会弹出一个菜单,随着选择各个不同的选项,子菜单的top位置会随着选项的位置而自动向下移动的,
但是现在我需要的是子菜单的top要和主菜单的top相同,无论选中那个选项子菜单的top都不会有位置的变化,请问用js做菜单怎么实现啊?
网上都是那种随着menu的位置变化的。谢谢!
普通的二级菜单,比如你在windows桌面右击鼠标,会弹出一个菜单,随着选择各个不同的选项,子菜单的top位置会随着选项的位置而自动向下移动的,
但是现在我需要的是子菜单的top要和主菜单的top相同,无论选中那个选项子菜单的top都不会有位置的变化,请问用js做菜单怎么实现啊?
网上都是那种随着menu的位置变化的。谢谢!
id ProvinceName ProvinceNo ProvinceOrder
1 北京市 0 0
2 安徽省 1 1
3 山东省 2 2
4 江苏省 3 3
以下省名略。 设计思想:id是表的自动编号,ProvinceName和ProvinceNo是必须的,前者是用来存储省名,后者则是联系表city必不可少的字段。至于ProvinceOrder则是用来给省名排序的,控制下拉列表中省名出现的位置,可以省略。 City(城市) 具体字段:id—自动编号 CityName—市名 CityNo—市名编号 CityOrder—市排序编号 ProvinceID—所在省编号市
idCityNameCityNoCityOrderProvinceID1北京市1102合肥市2213芜湖市3314安庆市4415
济南市5526
青岛市662 以下市名略。 设计思想:前面四项同Province表设计思想,ProvinceID字段将Province表和City表联系起来。 2.设计样式及编码 二级联动的样式很简单,在DreamWeaver 2004里向设计页面上放置两个select下拉菜单,分别取名为Province_select、City_select,它们都在名为form1的表单里。 编码需要用到html、vbscript及javascript。首先是连接数据库,我们用常用的<!--#include file="conn.asp"-->连接。conn.asp中代码略。 其次,用Javascript和Vbscript将Province和City表中的数据读出来并使Province_select和City_select联系起来,这一步是整个程序的关键所在。
代码如下: <script language=JavaScript>
<%
dim sql,i,j
'//////////////////////////读出 Province 表//////////////////////////
set rs_Province=server.createobject("adodb.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1
%> var selects=[];
selects['xxx']=new Array(new Option('请选择城市……','xxx')); <%
for i=1 to rs_s.recordcount
%>
selects['<%=rs_Province("ProvinceNo")%>']=new Array(
<%
'//////////////////////////读出 City 表//////////////////////////
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="&rs_Province("id")&" order by ProvinceOrder"
rs_City.open sql,conn,1,1
if rs_City.recordcount>0 then
for j=1 to rs_City.recordcount
if j=rs_City.recordcount then
%>
new Option('<%=trim(rs_City("CityName"))%>','<%=trim(rs_City("CityNo"))%>')); <%else%>
new Option('<%=trim(rs_City("Cityname"))%>','<%=trim(rs_City("CityNo"))%>'), <%
end if
rs_City.movenext
next
else
%>
new Option('','0'));
<%
end if
rs_City.close
set rs_City=nothing
rs_Province.movenext
next
rs_Province.close
set rs_Province=nothing
%> <!--//////////JavaScript控制联动///////////-->
function chsel(){
with (document.form1){
if(province_select.value) {
city_select.options.length=0;
for(var i=0;i<selects[province_select.value].length;i++){
city_select.add(selects[province_select.value][i]);
}
}
}
}</script> 最后,结合html,Javascript和Vbscript实现联动效果。代码如下: <!--//////////////////////////Province_select下拉列表//////////////////////////-->
<select name="Province_select" onChange=chsel()>
<option value="xxx" selected>请选择省份……</option>
<%
dim tmpid '定义一个临时变量用来记住省id
tmpid=0
set rs_Province=server.CreateObject("ADODB.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1
while not rs_Province.eof
tmpid=rs_Province("id")
%>
<option value="<%=rs_Province("ProvinceNo")%>" ><%=trim(rs_Province("ProvinceName"))%></option>
<%
rs_Province.movenext
wend
rs_Province.close
set rs_Province=nothing
%>
</select> <!--//////////////////////////City_select下拉列表//////////////////////////-->
<select name="City_select">
<%
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="&tmpid&" order by CityOrder"
rs_City.open sql,conn,1,1
while not rs_City.eof
%>
<option value="<%=rs_City("CityNo")%>"><%=trim(rs_City("CityName"))%></option>
<%
rs_City.movenext
wend
rs_City.close
set rs_City=nothing
%>
</select> 至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的。希望以后能多学点知识,写点更好的东东^_^