|
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>
至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的。希望以后能多学点知识,写点更好的东东^_^
|