<%@ 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]);
}
}
}
分享到:
相关推荐
对于初学者Ajax 城市级联就是一个横好的例子,这里有对于Ajax的详细的的运用
javascript 城市级联javascript 城市级联javascript 城市级联javascript 城市级联
js城市级联菜单通用,很好理解!非常好用
用JS实现树型结构的级联选择..类似XP的资源管理器.
使用javascript实现checkbox级联选择
js实现的中国省份城市选择 无刷新 代码简介明了方便移植
用JS实现了级联,未涉及到ajax 或jquery ajax;感觉方法很新颖,特传上来供大家参考。
jQuery城市级联插件,jQuery城市级联插件,jQuery城市级联插件
使用json实现级联效果,这段代码只实现了两级级联,三级多级级联原理一样。
小程序城市级联,实现城市选择功能,亲测可以使用。
这是一个级联菜单,使用ajax技术,采用了dwr框架,选择省份,城市自动加载,以此类推,可以实现多种级联效果
jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单
jQuery+div实现级联省份-城市查询,该实例包含jsp+js+css,所有代码为本人亲自编写,如有疑问请联系本人
使用js+jsp标签实现页面级联菜单,可以扩展成多级
Ajax实现省份&城市级联
用js实现三级级联,('s1','s2')"> 请选择</option> <option value="A" >A</option> <option value="B">B</option> ('s2','s3')"> 请选择</option> <select id="s3"> 请选择</option> </select>
城市级联 城市级联城市级联城市级联城市级联城市级联城市级联城市级联
纯JS---省份城市级联选择, (this);" style="width: 49%; float: left;"> ; float: right;"></select>