Two-level linkage drop-down list asp + js

Preface 

Almost all people who study network programming have encountered this problem, that is, the effect of connecting large cities and small cities. If it is in asp.net, it is very simple and an event can be solved, in asp, it seems that
You can use the value transfer method to solve this problem, but you must consider the issue of saving the status of other forms. However, no matter which of the two methods is used, there is a bad problem, that is, page refresh, always flashing pages
It will make people feel disgusted.

To this end, a new ajax technology has emerged.
Solved the problem of page refresh. For this reason, Tiandao has specially studied ajax, and it does not feel very difficult. If it is practiced, it can be applied more flexibly, in future articles, I will make a detailed description of ajax.
. This article mainly explains how to use js in asp and asp.net to implement a drop-down list without refreshing the New Linkage function.

Analysis

First of all, we need to solve the most important problem here: no refreshing. Since no refreshing occurs, the page cannot send requests. (If NO refreshing request is sent, ajax is used, this is about ajax.
In asp.net, if an event is used for secondary interaction, a request is sent when the first drop-down list is clicked each time, and the content of the next level is retrieved using the selected value. In this way
The same is true in asp when a request is refreshed. To avoid this problem, you can call out all the values on the page for display, in this way
When I send a request to call the data, of course there will be a refresh. (If there is a large amount of data, it is best to use ajax, because this will increase the Page code volume, not especially large, so optimization is not considered here .)

I.
Database design.

You may use this function for other major and minor types of association, or you may do the linkage between cities like me, but I still want to talk about the database structure, so that you do not understand the code behind me.
It is easy to explain later.

Table 1

---------- Table name: BCity ----------

BCityId BCityName
1
Beijing
2 Hebei

Table 2

---------- Table name: SCity ----------

SCityId SCityName BCityId
1
Haidian 1
2 Chaoyang 1
3 Chongwen 1
4
Chengde 2
5 Tangshan 2
6 Langfang 2

Associated field: BCity. BcityId = SCity. BCityId

II.
Implementation principle JS writing

We need to put all the values in the page and use js to control his display. So we first think of an array. We first load all the major cities into the drop-down list, then load all the small classes
Js in an array, and then in the selection according to the category to call up small cities. Write all the classes to the array. The Code is as follows:

<Script
Type = "text/javascript">
<! --
Var subval2 = new Array ();
// Define an array

<%
Set
ClassRs = server. CreateObject ("adodb. recordset ")
ClassSql = "select * from
SCity
ClassRs. open ClassSql, conn, 1, 3

If ClassRs. eof and ClassRs. bof
Then
Response. Write ("No information ")
Else
Count = 0' defines the subscript of the array
Do while not
ClassRs. eof
%>
Subval2 [<% = count %>] = new
Array ('<% = ClassRs ("BCityId") %>', '<% = ClassRs ("SCityId") %>', '<% = ClassRs

("SCityName") %> ');
<%
Count = count + 1
ClassRs. movenext

Loop

ClassRs. close

Set
ClassRs = nothing
End
If
%>

Code explanation:
First, we need to introduce a conn. asp database connection file. I omitted it here, and then call up the data in the SCity table. count is the defined array subscript variable.

Subval2 [<% = count %>] = new
Array ('<% = ClassRs ("BCityId") %>', '<% = ClassRs ("SCityId") %>', '<% = ClassRs ("SCityName ") %> ');
This statement assigns values to arrays in sequence. Until all the small cities are loaded into this array, someone will ask, How are there three values in this array, one of which is the id of the big city, yes, we just use
This is used to differentiate the categories. At last, our list of level 2 is also based on this value to retrieve the corresponding small cities. With such an array, we also need an event to write the values in the array to the drop-down list. Next
Read a piece of code:

Function
ClassChange (locationid)
{
Document. form1.SelectClass. length =
0;
// Document. form1.SelectClass. options [0] = new
Option ('select small class', ''); // comment this sentence if you want to directly select the first one.

For (I = 0; I <subval2.length;
I ++)
{
If (subval2 [I] [0] =
Locationid)
{
Document. form1.SelectClass. options [document. form1.SelectClass. length]
= New Option (subval2 [I]

[2], subval2 [I] [1]);
}
}
}

Analysis:This is a function
We can see that this function has a parameter, which I will tell you here is the identity of a large city passed in. We retrieve the corresponding small class list based on this value.

 
Code explanation:Document. form1.SelectClass. length = 0;
First, leave the value of drop-down list 2 empty. Otherwise, overlay occurs.

Document. form1.SelectClass. options [0] = new
Option ('select small class', ''); this sentence is filled with the small city item. If this sentence is removed, the first small city is displayed.

 
The following is a loop that loops through the array we previously assigned values, and then a judgment to pick out the list of small cities in the big city to which we belong. The big city number we previously assigned here is useful, here
It is to determine which array value is added to the drop-down list if the big city number is equal.

3. event triggering.

The above two sections talk about js events and the definition of js arrays in small cities. Next we will talk about calling this event. First, we will put two drop-down lists on the page, one is the list of major cities and the other is a small city.
List,The Code is as follows:

<%
Set
ItemRs = server. CreateObject ("adodb. recordset ")
ItemSql = "select * from
BCity"
ItemRs. open ItemSql, conn, 1, 3
If ItemRs. eof and ItemRs. bof then

Response. Write ("No information ")
Else
Response. Write ("<select
Name = "" SelectItem "" onChange = "" ClassChange (this. value )""

Style = "" width: 80px; ""> ")
Response. Write ("<option
Value = "" 0 "" selected> select a Category </option> ")
Do while not
ItemRs. eof
%>
<Option
Value = "<% = ItemRs (" BCityId ") %>"> <% = ItemRs ("BCityName") %> </option>
<%
ItemRs. movenext

Loop

Response. Write ("</select> ")

ItemRs. close

Set
ItemRs = nothing

End
If
%>
<Select name = "SelectClass" style = "width: 80px;
">
</Select>

Code Description:

This code is much simpler. It calls up big city data and cyclically places it in a drop-down list.
OnChange is used to trigger an event when the value changes, and transfer the number of the big city to the method. Then, the method is used to display the small class in the second list.

Summary

When I went to school, I felt that these codes were really complicated and complicated to use. Now I am studying them. I feel very simple, because you have seen more advanced code, because your knowledge is improving, although there are a lot of such text on the Internet
Chapter, I still want to organize one article, because I feel that they are not good enough to explain, as a beginner, it is hard to understand if there is no good explanation, although I feel very simple, this is also due to the sentence:
"The meeting is not difficult, but not difficult ". Well, let's write it here today. If you get help here, don't forget to leave a comment to thank me. :)

All Rights Reserved
2009.2.9