在我們制作網站會員注冊信息時，一般會涉及到填寫自己所在省/市，如果用input或textarea做成填寫形式不太理想。所以大部分網站都會選擇聯動下來列表形式，做起來也不算很復雜，同時看上去也很輕松。
具體做法如下：
1.設計數據庫
我們選用Access數據庫。首先，新建名為database1.mdb的Access數據庫
在database1.mdb數據庫中建立兩個表分別為province、city。具體字段設計如下：
Province(省)
具體字段：id—自動編號 ProvinceName—省名 ProvinceNo—省名編號 ProvinceOrder—省排序編號
| 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—所在省編號
| id |
CityName |
CityNo |
CityOrder |
ProvinceID |
| 1 |
北京市 |
1 |
1 |
0 |
| 2 |
合肥市 |
2 |
2 |
1 |
| 3 |
蕪湖市 |
3 |
3 |
1 |
| 4 |
安慶市 |
4 |
4 |
1 |
| 5 | 濟南市 |
5 |
5 |
2 |
| 6 | 青島市 |
6 |
6 |
2 |
以下市名略。
設計思想：前面四項同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>
至此，一個省市二級聯動菜單程序便寫好了。雖然代碼不多，但反映的技術還是比較全面的。