用javascript和Ajax分別寫省市級聯 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

首先用javascript來寫省市級聯:
1 使用數組優化省市級聯-根據索引
01
<head>
02
 
03
    <title></title>
04
    
05
    <script type="text/javascript">
06
        
07
        function selectCitys(){
08
            var cityArray = new Array();
09
            cityArray[0] = ["鄭州","新鄉","焦作","開封"];
10
            cityArray[1] = ["廣州","珠海","深圳"];
11
            cityArray[2] = ["西安","寶雞","渭南","漢中"];
12
            
13
            var s = document.getElementById("sheng");
14
            if(s.selectedIndex != 0) {
15
                //獲取選中的省對應數組中的索引
16
                var index = s.selectedIndex – 1;
17
                
18
                //清空city中的option
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 使用數組優化省市級聯-根據值
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'] = ["鄭州","新鄉","焦作","開封"];
12
            cityArray['gd'] = ["廣州","珠海","深圳"];
13
            cityArray['shx'] = ["西安","寶雞","渭南","漢中"];
14
            
15
            var s = document.getElementById("sheng").value;
16
            
17
            if(s != "") {
18
                //清空city中的option
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="">– 請選擇省 –</option>
05
        <option value="hn">河南</option>
06
        <option value="gd">廣東</option>
07
        <option value="shx">陜西</option>
08
    </select>
09
    <select name="" id="city">
10
        <option value="">– 請選擇城市 –</option>
11
    </select>
12
</body>

  使用ajax來寫省市級聯
01
<body>
02
    
03
    <select name="" id="sheng" onchange="selectCitys()">
04
        <option value="">– 請選擇省 –</option>
05
        <option value="hn">河南</option>
06
        <option value="gd">廣東</option>
07
        <option value="shx">陜西</option>
08
    </select>
09
    <select name="" id="city">
10
        <option value="">– 請選擇城市 –</option>
11
    </select>
01
<script type="text/javascript">
02
            var xmlHttp;
03
       
04
        /*創建XMLHttpRequest對象*/
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;//回調函數
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
        //DB取出數據
26
        Map<String, List<String>> data = new HashMap<String, List<String>>();
27
        List<String> hnList = new ArrayList<String>();
28
        hnList.add("鄭州");
29
        hnList.add("新鄉");
30
        hnList.add("焦作");
31
        hnList.add("開封");
32
        
33
        
34
        
35
        List<String> gdList = new ArrayList<String>();
36
        gdList.add("廣州");
37
        gdList.add("珠海");
38
        gdList.add("深圳");
39
        
40
        List<String> shaxList = new ArrayList<String>();
41
        shaxList.add("西安");
42
        shaxList.add("寶雞");
43
        shaxList.add("渭南");
44
        shaxList.add("漢中");
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
}
 

摘自 水月清風

發佈留言