Home > Developer > JavaScript
First, use javascript to write provincial/municipal connections:
1. Use arrays to optimize provincial/municipal connections-Based on Indexes
01
<Head>
02
03
<Title> </title>
04
05
<Script type = "text/javascript">
06
07
Function selectCitys (){
08
Var cityArray = new Array ();
09
CityArray [0] = ["Zhengzhou", "Xinxiang", "Jiaozuo", "Kaifeng"];
10
CityArray [1] = ["Guangzhou", "Zhuhai", "Shenzhen"];
11
CityArray [2] = ["Xi'an", "Baoji", "Weinan", "Hanzhong"];
12
13
Var s = document. getElementById ("sheng ");
14
If (s. selectedIndex! = 0 ){
15
// Obtain the index in the array corresponding to the selected Province
16
Var index = s. selectedIndex-1;
17
18
// Clear option in city
19
Document. getElementById ("city"). options. length = 1;
20
21
For (var I in cityArray [index]) {
22
Var city = cityArray [index] [I];
23
24
Var option = new Option (city, city );
25
Document. getElementById ("city"). options. add (option );
26
}
27
}
28
29
}
30
</Script>
31
</Head>
2. Use arrays to optimize provincial/municipal connections-based on values
01
<Head>
02
03
<Title> </title>
04
05
<Script type = "text/javascript">
06
07
Function selectCitys (){
08
Var cityArray = new Array ();
09
10
11
CityArray ['hn '] = ["Zhengzhou", "Xinxiang", "Jiaozuo", "Kaifeng"];
12
CityArray ['gd '] = ["Guangzhou", "Zhuhai", "Shenzhen"];
13
CityArray ['shx'] = ["Xi'an", "Baoji", "Weinan", "Hanzhong"];
14
15
Var s = document. getElementById ("sheng"). value;
16
17
If (s! = ""){
18
// Clear option in city
19
Document. getElementById ("city"). options. length = 1;
20
21
For (var I in cityArray [s]) {
22
Var city = cityArray [s] [I];
23
24
Var option = new Option (city, city );
25
Document. getElementById ("city"). options. add (option );
26
}
27
}
28
29
}
30
</Script>
31
</Head>
01
<Body>
02
03
<Select name = "" id = "sheng" onchange = "selectCitys ()">
04
<Option value = ""> -- select Province -- </option>
05
<Option value = "hn"> Henan </option>
06
<Option value = "gd"> Guangdong </option>
07
<Option value = "shx"> Shaanxi </option>
08
</Select>
09
<Select name = "" id = "city">
10
<Option value = ""> -- select a city -- </option>
11
</Select>
12
</Body>
Use ajax to write provincial/municipal connections
01
<Body>
02
03
<Select name = "" id = "sheng" onchange = "selectCitys ()">
04
<Option value = ""> -- select Province -- </option>
05
<Option value = "hn"> Henan </option>
06
<Option value = "gd"> Guangdong </option>
07
<Option value = "shx"> Shaanxi </option>
08
</Select>
09
<Select name = "" id = "city">
10
<Option value = ""> -- select a city -- </option>
11
</Select>
01
<Script type = "text/javascript">
02
Var xmlHttp;
03
04
/* Create an XMLHttpRequest object */
05
Function createXMLHttpRequest (){
06
If (window. ActiveXObject ){
07
// IE
08
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
09
} Else {
10
// Chrome firefox opera
11
XmlHttp = new XMLHttpRequest ();
12
}
13
}
14
15
Function sendAjax (){
16
CreateXMLHttpRequest ();
17
18
Var name = document. getElementById ("sheng"). value;
19
XmlHttp. onreadystatechange = callback; // callback function
20
21
22
XmlHttp. open ("GET", "sheng. jspx? Name = "+ name, true );
23
XmlHttp. send ();
24
25
}
26
27
Function callback (){
28
If (xmlHttp. readyState = 4 ){
29
If (xmlHttp. status = 200 ){
30
Var xml = xmlHttp. responseXML;
31
32
Var types = xml. getElementsByTagName ("recode ");
33
Document. getElementById ("city"). options. length = 1;
34
For (var I = 0; I <types. length; I ++ ){
35
36
// Alert (types [I]. childNodes [0]. nodeValue );
37
Var myOption = new Option (types [I]. childNodes [0]. nodeValue, types [I]. childNodes [0]. nodeValue );
38
Document. getElementById ("city"). options. add (myOption );
39
40
}
41
42
} Else {
43
Alert ("Ajax Error! ");
44
}
45
}
46
}
47
</Script>
48
</Body>
49
</Html>
Sheng. jspx
01
Package com. kaishengit. web;
02
03
04
Import java. io. IOException;
05
Import java. io. PrintWriter;
06
Import java. util. ArrayList;
07
Import java. util. HashMap;
08
Import java. util. List;
09
Import java. util. Map;
10
11
Import javax. servlet. ServletException;
12
Import javax. servlet. http. HttpServlet;
13
Import javax. servlet. http. HttpServletRequest;
14
Import javax. servlet. http. HttpServletResponse;
15
16
Public class CarServlet extends HttpServlet {
17
18
Private static final long serialVersionUID = 1L;
19
20
@ Override
21
Protected void service (HttpServletRequest request, HttpServletResponse response)
22
Throws ServletException, IOException {
23
24
25
// Retrieve data from the database
26
Map <String, List <String> data = new HashMap <String, List <String> ();
27
List <String> hnList = new ArrayList <String> ();
28
HnList. add ("Zhengzhou ");
29
HnList. add ("Xinxiang ");
30
HnList. add ("Jiaozuo ");
31
HnList. add ("Kaifeng ");
32
33
34
35
List <String> gdList = new ArrayList <String> ();
36
GdList. add ("Guangzhou ");
37
GdList. add ("Zhuhai ");
38
GdList. add ("Shenzhen ");
39
40
List <String> shaxList = new ArrayList <String> ();
41
ShaxList. add ("Xi'an ");
42
ShaxList. add ("Baoji ");
43
ShaxList. add ("Weinan ");
44
ShaxList. add ("Hanzhong ");
45
46
47
Data. put ("hn", hnList );
48
Data. put ("gd", gdList );
49
Data. put ("shax", shaxList );
50
//----------------------------------------------------------
51
01
String name = request. getParameter ("name ");
02
03
List <String> dataList = data. get (name );
04
05
06
Response. setContentType ("text/xml; charset = UTF-8 ");
07
PrintWriter out = response. getWriter ();
08
09
Out. print ("<? Xml version = \ "1.0 \" encoding = \ "UTF-8 \"?> ");
10
Out. print ("<data> ");
11
For (String str: dataList ){
12
Out. print ("<recode>" + str + "</recode> ");
13
}
14
Out. print ("</data> ");
15
16
Out. flush ();
17
Out. close ();
18
19
20
}
21
22
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
