用js实现城市级联（原创简单实用）

lizhihui19871127

浏览: 96965 次
性别:
来自: 广州

最近访客更多访客>>

cevin15

zhanzjx

zhouping5460

xylei_02

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

城市级联、多级菜单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <script src="common/js/jquery.js" type="text/javascript"></script>
    <script src="common/js/city.js" type="text/javascript"></script> 
    <script>
    function getV(){
    	var p = $("#country").val();
    	var p2 = $("#province").val();
    	var p3 = $("#city").val();
    	var p4 = document.getElementById("country").options[document.getElementById("country").selectedIndex].text;
    	alert(p);
    	alert(p2);
    	alert(p3);
    	alert(p4);
    }
    </script>
  </head>
  <body onLoad="getCountry()">
  <select id="country" onChange="getProvince()">
  <option value="0">--请选择国家--</option>
  </select>
  <select id="province" onChange="getCity()">
  <option value="0">--请选择省份--</option>
  </select>
  <select id="city">
  <option value="0">--请选择城市--</option>
  </select>
  <input type="button" name="bt" id="bt" value="获取选择的值" onclick="getV()"/>
  </body>
</html>

/** 城市级联js **/
	
	var country = new Array();
	var province = new Array();
	var city = new Array();
	DataInit();
	
	/** 初始化城市数据 **/
	function DataInit(){
		country[0] = new Array("ZG","中国");
		country[1] = new Array("MG","美国");
		
		province[0] = new Array("GD","广东","ZG");
		province[1] = new Array("HB","湖北","ZG");
		province[2] = new Array("JX","江西","ZG");
		province[3] = new Array("MG1","Am1","MG");
		
		city[0] = new Array("GZ","广州","GD");
		city[1] = new Array("SZ","深圳","GD");
		city[2] = new Array("WH","武汉","HB");
		city[3] = new Array("JJ","九江","JX");
	}
	
	/** 获取国家列表 **/
	function getCountry(){
		var countryList = document.getElementById("country");
		countryList.options.length = 0;
		countryList.options[0] = new Option("---请选择国家---",0);
		for(i = 0;i < country.length;i ++){
			countryList.options[i+1] = new Option(country[i][1],country[i][0]);
		}
	}
	
	/** 根据选择的国家获取省份列表 **/
	function getProvince(){
		var p = $("#country").val();
		var provinceList = document.getElementById("province");
		provinceList.options.length = 0;
		provinceList.options[0] = new Option("---请选择省份---",0);
		var cityList = document.getElementById("city");
		cityList.options.length = 0;
		cityList.options[0] = new Option("---请选择城市---",0);
		var count = 0;
		for(var j = 0;j < province.length;j ++){
			if(province[j][2] == p){
				count ++;
				provinceList.options[count] = new Option(province[j][1],province[j][0]);
			}
		}
	}
	
	/** 根据选择的省份获取城市列表 **/
	function getCity(){
		var p = $("#province").val();
		var cityList = document.getElementById("city");
		cityList.options.length = 0;
		cityList.options[0] = new Option("---请选择城市---",0);
		var count = 0;
		for(var j = 0;j < city.length;j ++){
			if(city[j][2] == p){
				count ++;
				cityList.options[count] = new Option(city[j][1],city[j][0]);
			}
		}
	}

分享到：