Take the most commonly used "province-city drop-down list linkage" as an example!
When we do website membership registration information, it usually involves filling in our own province/city. It is not ideal to use input or textarea to fill in the form. Therefore, most websites will choose the form of linked list, which is not very complicated to do and looks easy at the same time.
Specific practices are as follows:
1. Design database
We choose Access database. First, create a new Access database named database 1.mdb.
Set two tables in database 1.mdb, namely provinces and cities. The specific fields are designed as follows:
Province (province)
Specific fields: id— automatically numbered province name—province name—province number—province name number—province order—province sort number.
Province id province name province number province order
1 Beijing 0
2 Anhui province 1
3 Shandong Province 2 2
4 Jiangsu Province 3 3
The following provinces are omitted.
Design idea: id is the automatic number of the table, and ProvinceName and ProvinceNo are necessary. The former is used to store the province name, and the latter is a necessary field to contact the table city. As for the ProvinceOrder, it is used to sort the province names, and it can be omitted to control where the province names appear in the drop-down list.
City (city)
Specific fields: id— automatic numbering CiteName—CiteNo— CiteNo—CityOrder— city sort number ProvinceID— province number.
City id
City name
City number
Urban order
ProvinceID
1
Beijing
1
1
2
Hefei city
2
2
1
three
Wuhu city
three
three
1
four
Anqing city
four
four
1
5 Jinan City
five
five
2
6 Qingdao City
six
six
2
The following city names are abbreviations.
Design idea: The first four items have the same design idea as the provincial table, and the ProvinceID field connects the provincial table and the municipal table.
2. Design style and coding
The style of secondary linkage is very simple. In DreamWeaver 2004, two drop-down menus named Province_select and City_select are located on the design page, both of which are forms named form 1.
Coding requires Html, vbscript and javascript. The first is to connect to the database, we use the commonly used.
Secondly, using Javascript and Vbscript to read the data in the provincial and municipal tables and connect the provincial and municipal selection tables with the city selection tables, which is the focus of the whole program.
The code is as follows:
& lt scripting language = JavaScript & gt
& lt%
dim sql，I，j
//////////////////Read out the provincial table///////////////.
set RS _ Province = server . createobject(" adodb . recordset ")
SQL = " select * from Province order by Province order "
Rs_Province.open sql, Connecticut, 1, 1
% & gt
Var selection = [];
Select ['XXX'] = new array (new option ('Please select a city ...'),' XXX');
& lt%
For i= 1 to rs_s.recordcount
% & gt
Select ['<; % = RS _ Province(" Province no ")% & gt；' ] = new array (
& lt%
//////////////////Read out the city table///////////////.
set RS _ City = server . createobject(" adodb . recordset ")
SQL = " select * from City where province id = " & amp； RS _ Province(“id”)& amp； "Sort by province"
Rs_City.open sql, Connecticut, 1, 1
If rs _ City.recordcount & gt Then 0
For j= 1 to rs_City.recordcount
If j=rs_City.recordcount, then
% & gt
New option ('<% = trim (RS _ city ("cityname"))% >' ，' & lt% = trim(RS _ City(" City no "))% & gt；' ));
& lt% else % & gt
New option ('<% = trim (RS _ city ("cityname"))% >' ，' & lt% = trim(RS _ City(" City no "))% & gt；' ),
& lt%
If ... it will be over.
rs_City.movenext
then
other
% & gt
New option (','0');
& lt%
If ... it will be over.
rs_City.close
Set rs _ City = none.
rs_Province.movenext
then
Rs _ province. close
Set rs_Province=nothing.
% & gt
& lt！ -///////////JavaScript control link//////////>
Function chsel(){
Use (document.form 1){
if(province_select.value) {
city _ select . options . length = 0；
for(var I = 0； I < select [save selection value]. Length; i++){
City_select.add (select [province _ select. value] [I]);
}
}
}
}
& lt/script & gt；
Finally, the linkage effect is realized by combining html, Javascript and Vbscript. The code is as follows:
& lt！ -///////////////////Province _ Select the drop-down list////////->
& ltselect name = " Province _ select " onChange = chsel()>
& lt option value = "XXX" selected & gt Please select a province. ...
& lt%
"Dim tmpid" defines a temporary variable to remember the province id.
tmpid=0
Set rs_Province=server. CreateObject("ADODB.recordset ")
SQL = " select * from Province order by Province order "
Rs_Province.open sql, Connecticut, 1, 1
Not rs_Province.eof
tmpid=rs_Province("id ")
% & gt
& lt option value = "<% = RS _ province ("provinceno ")% >><% = trim (RS _ province ("provincename ")% > & lt/option & gt；
& lt%
rs_Province.movenext
line
Rs _ province. close
Set rs_Province=nothing.
% & gt
& lt/select & gt；
& lt！ -/////////////////drop-down list city _ select////////////>
& ltselect name = " City _ select " & gt
& lt%
set RS _ City = server . createobject(" adodb . recordset ")
SQL = " select * from City where province id = " & amp； TMPID & "Sort by city"
Rs_City.open sql, Connecticut, 1, 1
Not rs_City.eof
% & gt
& lt option value = "<% = RS _ city ("cityno ")% >><% = trim (RS _ city ("cityname "))% > & lt/option & gt；
& lt%
rs_City.movenext
line
rs_City.close
Set rs _ City = none.
% & gt
& lt/select & gt；
At this point, the provincial and municipal linkage menu scheme has been written. Although the code is not much, the technology embodied is still relatively comprehensive. I hope I can learn more knowledge and write better things in the future _