用javascript和Ajax分別寫省市級聯

時間 2019-11-20

標籤 javascript ajax 分別省市級聯欄目 JavaScript 简体版

原文原文鏈接

首先用javascript來寫省市級聯：

1 使用數組優化省市級聯-根據索引

<head>

	<title></title>
	
	<script type="text/javascript">
		
		function selectCitys(){
			var cityArray = new Array();
			cityArray[0] = ["鄭州","新鄉","焦做","開封"];
			cityArray[1] = ["廣州","珠海","深圳"];
			cityArray[2] = ["西安","寶雞","渭南","漢中"];
			
			var s = document.getElementById("sheng");
			if(s.selectedIndex != 0) {
				//獲取選中的省對應數組中的索引
				var index = s.selectedIndex - 1;
				
				//清空city中的option
				document.getElementById("city").options.length = 1;
				
				for(var i in cityArray[index]) {
					var city = cityArray[index][i];
					
					var option = new Option(city,city);
					document.getElementById("city").options.add(option);
				}
			}
			
		}
	</script>
</head>

2 使用數組優化省市級聯-根據值

<head>

	<title></title>
	
	<script type="text/javascript">
		
		function selectCitys(){
			var cityArray = new Array();
			
			
			cityArray['hn'] = ["鄭州","新鄉","焦做","開封"];
			cityArray['gd'] = ["廣州","珠海","深圳"];
			cityArray['shx'] = ["西安","寶雞","渭南","漢中"];
			
			var s = document.getElementById("sheng").value;
			
			if(s != "") {
				//清空city中的option
				document.getElementById("city").options.length = 1;
				
				for(var i in cityArray[s]) {
					var city = cityArray[s][i];
					
					var option = new Option(city,city);
					document.getElementById("city").options.add(option);
				}
			}
			
			}
	</script>
</head>

<body>
	
	<select name="" id="sheng" onchange="selectCitys()">
		<option value="">-- 請選擇省 --</option>
		<option value="hn">河南</option>
		<option value="gd">廣東</option>
		<option value="shx">陝西</option>
	</select>
	<select name="" id="city">
		<option value="">-- 請選擇城市 --</option>
	</select>
</body>

使用ajax來寫省市級聯

<body>
	
	<select name="" id="sheng" onchange="selectCitys()">
		<option value="">-- 請選擇省 --</option>
		<option value="hn">河南</option>
		<option value="gd">廣東</option>
		<option value="shx">陝西</option>
	</select>
	<select name="" id="city">
		<option value="">-- 請選擇城市 --</option>
	</select>

<script type="text/javascript">
            var xmlHttp;
       
        /*建立XMLHttpRequest對象*/
        function createXMLHttpRequest() {
            if(window.ActiveXObject) {
                  //IE
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              } else {
                  //chrome firefox opera
                  xmlHttp = new XMLHttpRequest();
              }
        }
       
        function sendAjax(){
            createXMLHttpRequest();
           
            var name = document.getElementById("sheng").value;
            xmlHttp.onreadystatechange = callback;//回調函數
           
           
            xmlHttp.open("GET","sheng.jspx?name="+name,true);
            xmlHttp.send();
           
        }
       
        function callback() {
            if(xmlHttp.readyState == 4) {
                if(xmlHttp.status == 200) {
                    var xml = xmlHttp.responseXML;
                   
                    var types = xml.getElementsByTagName("recode");
                    document.getElementById("city").options.length = 1;
                    for(var i = 0;i < types.length;i++) {
                       
                        //alert(types[i].childNodes[0].nodeValue);
                        var myOption = new Option(types[i].childNodes[0].nodeValue,types[i].childNodes[0].nodeValue);
                        document.getElementById("city").options.add(myOption);
                       
                    }
                   
                } else {
                    alert("Ajax Error!");
                }
            }
        }
    </script>
  </body>
</html>

sheng.jspxjavascript

package com.kaishengit.web;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CarServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		
		//DB取出數據
		Map<String, List<String>> data = new HashMap<String, List<String>>();
		List<String> hnList = new ArrayList<String>();
		hnList.add("鄭州");
		hnList.add("新鄉");
		hnList.add("焦做");
		hnList.add("開封");
		
		
		
		List<String> gdList = new ArrayList<String>();
		gdList.add("廣州");
		gdList.add("珠海");
		gdList.add("深圳");
		
		List<String> shaxList = new ArrayList<String>();
		shaxList.add("西安");
		shaxList.add("寶雞");
		shaxList.add("渭南");
		shaxList.add("漢中");
		
		
		data.put("hn", hnList);
		data.put("gd", gdList);
		data.put("shax", shaxList);
		//----------------------------------------------------------

String name = request.getParameter("name");
		
		List<String> dataList = data.get(name);
		
		
		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		out.print("<data>");
		for(String str : dataList) {
			out.print("<recode>"+str+"</recode>");
		}
		out.print("</data>");
		
		out.flush();
		out.close();
		
		
	}
	
}