用js兑现城市级联（原创简单实用）
日期：2014-05-16 浏览次数：20438 次
用js实现城市级联（原创简单实用）
<%@ 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]);
}
}
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
