用javascript和Ajax分别写省市级联

原创
2012/03/08 21:28
阅读数 22.1W

首先用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.jspx

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();
		
		
	}
	
}


 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部