省份城市联动的例子
//省份联动的例子
<%@ 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>
<base href="<%=basePath%>">
<title>省份联动的例子</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script>
function setcity(city) {
switch (document.oblogform["province"].value) {
case "安徽" :
var cityOptions = new Array(
"合肥(*)", "合肥",
"安庆", "安庆",
"蚌埠", "蚌埠",
"亳州", "亳州",
"巢湖", "巢湖",
"滁州", "滁州",
"阜阳", "阜阳",
"贵池", "贵池",
"淮北", "淮北",
"淮化", "淮化",
"淮南", "淮南",
"黄山", "黄山",
"九华山", "九华山",
"六安", "六安",
"马鞍山", "马鞍山",
"宿州", "宿州",
"铜陵", "铜陵",
"屯溪", "屯溪",
"芜湖", "芜湖",
"宣城", "宣城");
break;
case "北京" :
var cityOptions = new Array(
"东城", "东城",
"西城", "西城",
"崇文", "崇文",
"宣武", "宣武",
"朝阳", "朝阳",
"丰台", "丰台",
"石景山", "石景山",
"海淀", "海淀",
"门头沟", "门头沟",
"房山", "房山",
"通州", "通州",
"顺义", "顺义",
"昌平", "昌平",
"大兴", "大兴",
"平谷", "平谷",
"怀柔", "怀柔",
"密云", "密云",
"延庆", "延庆");
break;
case "重庆" :
var cityOptions = new Array(
"万州", "万州",
"涪陵", "涪陵",
"渝中", "渝中",
"大渡口", "大渡口",
"江北", "江北",
"沙坪坝", "沙坪坝",
"九龙坡","九龙坡",
"南岸", "南岸",
"北碚", "北碚",
"万盛", "万盛",
"双挢", "双挢",
"渝北", "渝北",
"巴南", "巴南",
"黔江", "黔江",
"长寿", "长寿",
"綦江", "綦江",
"潼南", "潼南",
"铜梁", "铜梁",
"大足", "大足",
"荣昌", "荣昌",
"壁山", "壁山",
"梁平", "梁平",
"城口", "城口",
"丰都", "丰都",
"垫江", "垫江",
"武隆", "武隆",
"忠县", "忠县",
"开县", "开县",
"云阳", "云阳",
"奉节", "奉节",
"巫山", "巫山",
"巫溪", "巫溪",
"石柱", "石柱",
"秀山", "秀山",
"酉阳", "酉阳",
"彭水", "彭水",
"江津", "江津",
"合川", "合川",
"永川", "永川",
"南川", "南川");
break;
case "福建" :
var cityOptions = new Array(
"福州(*)", "福州",
"福安", "福安",
"龙岩", "龙岩",
"南平", "南平",
"宁德", "宁德",
"莆田", "莆田",
"泉州", "泉州",
"三明", "三明",
"邵武", "邵武",
"石狮", "石狮",
"永安", "永安",
"武夷山", "武夷山",
"厦门", "厦门",
"漳州", "漳州");
break;
case "甘肃" :
var cityOptions = new Array(
"兰州(*)", "兰州",
"白银", "白银",
"定西", "定西",
"敦煌", "敦煌",
"甘南", "甘南",
"金昌", "金昌",
"酒泉", "酒泉",
"临夏", "临夏",
"平凉", "平凉",
"天水", "天水",
"武都", "武都",
"武威", "武威",
"西峰", "西峰",
"张掖", "张掖");
break;
case "广东" :
var cityOptions = new Array(
"广州(*)", "广州",
"潮阳", "潮阳",
"潮州", "潮州",
"澄海", "澄海",
"东莞", "东莞",
"佛山", "佛山",
"河源", "河源",
"惠州", "惠州",
"江门", "江门",
"揭阳", "揭阳",
"开平", "开平",
"茂名", "茂名",
"梅州", "梅州",
"清远", "清远",
"汕头", "汕头",
"汕尾", "汕尾",
"韶关", "韶关",
"深圳", "深圳",
"顺德", "顺德",
"阳江", "阳江",
"英德", "英德",
"云浮", "云浮",
"增城", "增城",
"湛江", "湛江",
"肇庆", "肇庆",
"中山", "中山",
"珠海", "珠海");
break;
case "广西" :
var cityOptions = new Array(
"南宁(*)", "南宁",
"百色", "百色",
"北海", "北海",
"桂林", "桂林",
"防城港", "防城港",
"河池", "河池",
"贺州", "贺州",
"柳州", "柳州",
"钦州", "钦州",
"梧州", "梧州",
"玉林", "玉林");
break;
case "贵州" :
var cityOptions = new Array(
"贵阳(*)", "贵阳",
"安顺", "安顺",
"毕节", "毕节",
"都匀", "都匀",
"凯里", "凯里",
"六盘水", "六盘水",
"铜仁", "铜仁",
"兴义", "兴义",
"玉屏", "玉屏",
"遵义", "遵义");
break;
case "海南" :
var cityOptions = new Array(
"海口(*)", "海口",
"儋县", "儋县",
"陵水", "陵水",
"琼海", "琼海",
"三亚", "三亚",
"通什", "通什",
"万宁", "万宁");
break;
case "河北" :
var cityOptions = new Array(
"石家庄(*)", "石家庄",
"保定", "保定",
"北戴河", "北戴河",
"沧州", "沧州",
"承德", "承德",
"丰润", "丰润",
"邯郸", "邯郸",
"衡水", "衡水",
"廊坊", "廊坊",
"南戴河", "南戴河",
"秦皇岛", "秦皇岛",
"唐山", "唐山",
"新城", "新城",
"邢台", "邢台",
"张家口", "张家口");
break;
case "黑龙江" :
var cityOptions = new Array(
"哈尔滨(*)", "哈尔滨",
"北安", "北安",
"大庆", "大庆",
"大兴安岭", "大兴安岭",
"鹤岗", "鹤岗",
"黑河", "黑河",
"佳木斯", "佳木斯",
"鸡西", "鸡西",
"牡丹江", "牡丹江",
"齐齐哈尔", "齐齐哈尔",
"七台河", "七台河",
"双鸭山", "双鸭山",
"绥化", "绥化",
"伊春", "伊春");
break;
case "河南" :
var cityOptions = new Array(
"郑州(*)", "郑州",
"安阳", "安阳",
"鹤壁", "鹤壁",
"潢川", "潢川",
"焦作", "焦作",
"济源", "济源",
"开封", "开封",
"漯河", "漯河",
"洛阳", "洛阳",
"南阳", "南阳",
"平顶山", "平顶山",
"濮阳", "濮阳",
"三门峡", "三门峡",
"商丘", "商丘",
"新乡", "新乡",
"信阳", "信阳",
"许昌", "许昌",
"周口", "周口",
"驻马店", "驻马店");
break;
case "香港" :
var cityOptions = new Array(
"香港", "香港",
"九龙", "九龙",
"新界", "新界");
break;
case "湖北" :
var cityOptions = new Array(
"武汉(*)", "武汉",
"恩施", "恩施",
"鄂州", "鄂州",
"黄冈", "黄冈",
"黄石", "黄石",
"荆门", "荆门",
"荆州", "荆州",
"潜江", "潜江",
"十堰", "十堰",
"随州", "随州",
"武穴", "武穴",
"仙桃", "仙桃",
"咸宁", "咸宁",
"襄阳", "襄阳",
"襄樊", "襄樊",
"孝感", "孝感",
"宜昌", "宜昌");
break;
case "湖南" :
var cityOptions = new Array(
"长沙(*)", "长沙",
"常德", "常德",
"郴州", "郴州",
"衡阳", "衡阳",
"怀化", "怀化",
"吉首", "吉首",
"娄底", "娄底",
"邵阳", "邵阳",
"湘潭", "湘潭",
"益阳", "益阳",
"岳阳", "岳阳",
"永州", "永州",
"张家界", "张家界",
"株洲", "株洲");
break;
case "江苏" :
var cityOptions = new Array(
"南京(*)", "南京",
"常熟", "常熟",
"常州", "常州",
"海门", "海门",
"淮安", "淮安",
"江都", "江都",
"江阴", "江阴",
"昆山", "昆山",
"连云港", "连云港",
"南通", "南通",
"启东", "启东",
"沭阳", "沭阳",
"宿迁", "宿迁",
"苏州", "苏州",
"太仓", "太仓",
"泰州", "泰州",
"同里", "同里",
"无锡", "无锡",
"徐州", "徐州",
"盐城", "盐城",
"扬州", "扬州",
"宜兴", "宜兴",
"仪征", "仪征",
"张家港", "张家港",
"镇江", "镇江",
"周庄", "周庄");
break;
case "江西" :
var cityOptions = new Array(
"南昌(*)", "南昌",
"抚州", "抚州",
"赣州", "赣州",
"吉安", "吉安",
"景德镇", "景德镇",
"井冈山", "井冈山",
"九江", "九江",
"庐山", "庐山",
"萍乡", "萍乡",
"上饶", "上饶",
"新余", "新余",
"宜春", "宜春",
"鹰潭", "鹰潭");
break;
case "吉林" :
var cityOptions = new Array(
"长春(*)", "长春",
"白城", "白城",
"白山", "白山",
"珲春", "珲春",
"辽源", "辽源",
"梅河", "梅河",
"吉林", "吉林",
"四平", "四平",
"松原", "松原",
"通化", "通化",
"延吉", "延吉");
break;
case "辽宁" :
var cityOptions = new Array(
"沈阳(*)", "沈阳",
"鞍山", "鞍山",
"本溪", "本溪",
"朝阳", "朝阳",
"大连", "大连",
"丹东", "丹东",
"抚顺", "抚顺",
"阜新", "阜新",
"葫芦岛", "葫芦岛",
"锦州", "锦州",
"辽阳", "辽阳",
"盘锦", "盘锦",
"铁岭", "铁岭",
"营口", "营口");
break;
case "澳门" :
var cityOptions = new Array(
"澳门", "澳门");
break;
case "内蒙古" :
var cityOptions = new Array(
"呼和浩特(*)", "呼和浩特",
"阿拉善盟", "阿拉善盟",
"包头", "包头",
"赤峰", "赤峰",
"东胜", "东胜",
"海拉尔", "海拉尔",
"集宁", "集宁",
"临河", "临河",
"通辽", "通辽",
"乌海", "乌海",
"乌兰浩特", "乌兰浩特",
"锡林浩特", "锡林浩特");
break;
case "宁夏" :
var cityOptions = new Array(
"银川(*)", "银川",
"固源", "固源",
"石嘴山", "石嘴山",
"吴忠", "吴忠");
break;
case "青海" :
var cityOptions = new Array(
"西宁(*)", "西宁",
"德令哈", "德令哈",
"格尔木", "格尔木",
"共和", "共和",
"海东", "海东",
"海晏", "海晏",
"玛沁", "玛沁",
"同仁", "同仁",
"玉树", "玉树");
break;
case "山东" :
var cityOptions = new Array(
"济南(*)", "济南",
"滨州", "滨州",
"兖州", "兖州",
"德州", "德州",
"东营", "东营",
"菏泽", "菏泽",
"济宁", "济宁",
"莱芜", "莱芜",
"聊城", "聊城",
"临沂", "临沂",
"蓬莱", "蓬莱",
"青岛", "青岛",
"曲阜", "曲阜",
"日照", "日照",
"泰安", "泰安",
"潍坊", "潍坊",
"威海", "威海",
"烟台", "烟台",
"枣庄", "枣庄",
"淄博", "淄博");
break;
case "上海" :
var cityOptions = new Array(
"崇明", "崇明",
"黄浦", "黄浦",
"卢湾", "卢湾",
"徐汇", "徐汇",
"长宁", "长宁",
"静安", "静安",
"普陀", "普陀",
"闸北", "闸北",
"虹口", "虹口",
"杨浦", "杨浦",
"闵行", "闵行",
"宝山", "宝山",
"嘉定", "嘉定",
"浦东", "浦东",
"金山", "金山",
"松江", "松江",
"青浦", "青浦",
"南汇", "南汇",
"奉贤", "奉贤");
break;
case "山西" :
var cityOptions = new Array(
"太原(*)", "太原",
"长治", "长治",
"大同", "大同",
"候马", "候马",
"晋城", "晋城",
"离石", "离石",
"临汾", "临汾",
"宁武", "宁武",
"朔州", "朔州",
"忻州", "忻州",
"阳泉", "阳泉",
"榆次", "榆次",
"运城", "运城");
break;
case "陕西" :
var cityOptions = new Array(
"西安(*)", "西安",
"安康", "安康",
"宝鸡", "宝鸡",
"汉中", "汉中",
"渭南", "渭南",
"商州", "商州",
"绥德", "绥德",
"铜川", "铜川",
"咸阳", "咸阳",
"延安", "延安",
"榆林", "榆林");
break;
case "四川" :
var cityOptions = new Array(
"成都(*)", "成都",
"巴中", "巴中",
"达川", "达川",
"德阳", "德阳",
"都江堰", "都江堰",
"峨眉山", "峨眉山",
"涪陵", "涪陵",
"广安", "广安",
"广元", "广元",
"九寨沟", "九寨沟",
"康定", "康定",
"乐山", "乐山",
"泸州", "泸州",
"马尔康", "马尔康",
"绵阳", "绵阳",
"眉山", "眉山",
"南充", "南充",
"内江", "内江",
"攀枝花", "攀枝花",
"遂宁", "遂宁",
"汶川", "汶川",
"西昌", "西昌",
"雅安", "雅安",
"宜宾", "宜宾",
"自贡", "自贡",
"资阳", "资阳");
break;
case "台湾" :
var cityOptions = new Array(
"台北(*)", "台北",
"基隆", "基隆",
"台南", "台南",
"台中", "台中",
"高雄", "高雄",
"屏东", "屏东",
"南投", "南投",
"云林", "云林",
"新竹", "新竹",
"彰化", "彰化",
"苗栗", "苗栗",
"嘉义", "嘉义",
"花莲", "花莲",
"桃园", "桃园",
"宜兰", "宜兰",
"台东", "台东",
"金门", "金门",
"马祖", "马祖",
"澎湖", "澎湖");
break;
case "天津" :
var cityOptions = new Array(
"天津", "天津",
"和平", "和平",
"东丽", "东丽",
"河东", "河东",
"西青", "西青",
"河西", "河西",
"津南", "津南",
"南开", "南开",
"北辰", "北辰",
"河北", "河北",
"武清", "武清",
"红挢", "红挢",
"塘沽", "塘沽",
"汉沽", "汉沽",
"大港", "大港",
"宁河", "宁河",
"静海", "静海",
"宝坻", "宝坻",
"蓟县", "蓟县" );
break;
case "新疆" :
var cityOptions = new Array(
"乌鲁木齐(*)", "乌鲁木齐",
"阿克苏", "阿克苏",
"阿勒泰", "阿勒泰",
"阿图什", "阿图什",
"博乐", "博乐",
"昌吉", "昌吉",
"东山", "东山",
"哈密", "哈密",
"和田", "和田",
"喀什", "喀什",
"克拉玛依", "克拉玛依",
"库车", "库车",
"库尔勒", "库尔勒",
"奎屯", "奎屯",
"石河子", "石河子",
"塔城", "塔城",
"吐鲁番", "吐鲁番",
"伊宁", "伊宁");
break;
case "西藏" :
var cityOptions = new Array(
"拉萨(*)", "拉萨",
"阿里", "阿里",
"昌都", "昌都",
"林芝", "林芝",
"那曲", "那曲",
"日喀则", "日喀则",
"山南", "山南");
break;
case "云南" :
var cityOptions = new Array(
"昆明(*)", "昆明",
"大理", "大理",
"保山", "保山",
"楚雄", "楚雄",
"大理", "大理",
"东川", "东川",
"个旧", "个旧",
"景洪", "景洪",
"开远", "开远",
"临沧", "临沧",
"丽江", "丽江",
"六库", "六库",
"潞西", "潞西",
"曲靖", "曲靖",
"思茅", "思茅",
"文山", "文山",
"西双版纳", "西双版纳",
"玉溪", "玉溪",
"中甸", "中甸",
"昭通", "昭通");
break;
case "浙江" :
var cityOptions = new Array(
"杭州(*)", "杭州",
"安吉", "安吉",
"慈溪", "慈溪",
"定海", "定海",
"奉化", "奉化",
"海盐", "海盐",
"黄岩", "黄岩",
"湖州", "湖州",
"嘉兴", "嘉兴",
"金华", "金华",
"临安", "临安",
"临海", "临海",
"丽水", "丽水",
"宁波", "宁波",
"瓯海", "瓯海",
"平湖", "平湖",
"千岛湖", "千岛湖",
"衢州", "衢州",
"江山", "江山",
"瑞安", "瑞安",
"绍兴", "绍兴",
"嵊州", "嵊州",
"台州", "台州",
"温岭", "温岭",
"温州", "温州",
"余姚", "余姚",
"舟山", "舟山");
break;
case "海外" :
var cityOptions = new Array(
"欧洲", "欧洲",
"北美", "北美",
"南美", "南美",
"亚洲", "亚洲",
"非洲", "非洲",
"大洋洲", "大洋洲");
break;
default:
var cityOptions = new Array("", "");
break;
}
document.oblogform["city"].options.length = 0;
for(var i = 0; i < cityOptions.length/2; i++) {
document.oblogform["city"].options[i]=new Option(cityOptions[i*2],cityOptions[i*2+1]);
if (document.oblogform["city"].options[i].value==city)
{
//alert("here put City ok!");
document.oblogform["city"].selectedIndex = i;
}
}
}
function initprovcity(province,city) {
var provObject = document.oblogform["province"];
for(var i = 0; i < document.oblogform["province"].options.length; i++) {
if (document.oblogform["province"].options[i].value==province)
{
//alert("prov put is ok");
document.oblogform["province"].selectedIndex = i;
}
}
setcity(city);
}
</script>
</head>
<body>
<%
String showCity =
showCity = "<select onchange='setcity();' name='province' >";
showCity = showCity + "<option value=''>--请选择省份--</option>";
showCity = showCity + "<option ";
showCity = showCity + "value=安徽>安徽</option> <option value=北京>北京</option> ";
showCity = showCity + "<option value=重庆>重庆</option> <option ";
showCity = showCity + "value=福建>福建</option> <option value=甘肃>甘肃</option> ";
showCity = showCity + "<option value=广东>广东</option> <option ";
showCity = showCity + "value=广西>广西</option> <option value=贵州>贵州</option> ";
showCity = showCity + "<option value=海南>海南</option> <option ";
showCity = showCity + "value=河北>河北</option> <option value=黑龙江>黑龙江</option> ";
showCity = showCity + "<option value=河南>河南</option> <option ";
showCity = showCity + "value=香港>香港</option> <option value=湖北>湖北</option> ";
showCity = showCity + "<option value=湖南>湖南</option> <option ";
showCity = showCity + "value=江苏>江苏</option> <option value=江西>江西</option> ";
showCity = showCity + "<option value=吉林>吉林</option> <option ";
showCity = showCity + "value=辽宁>辽宁</option> <option value=澳门>澳门</option>";
showCity = showCity + "<option value=内蒙古>内蒙古</option> <option ";
showCity = showCity + "value=宁夏>宁夏</option> <option value=青海>青海</option> ";
showCity = showCity + "<option value=山东>山东</option> <option ";
showCity = showCity + "value=上海>上海</option> <option value=山西>山西</option> ";
showCity = showCity + "<option value=陕西>陕西</option> <option ";
showCity = showCity + "value=四川>四川</option> <option value=台湾>台湾</option> ";
showCity = showCity + "<option value=天津>天津</option> <option ";
showCity = showCity + "value=新疆>新疆</option> <option value=西藏>西藏</option> ";
showCity = showCity + "<option value=云南>云南</option> <option ";
showCity = showCity + "value=浙江>浙江</option> <option ";
showCity = showCity + "value=海外>海外</option></select>";
showCity = showCity + " <select name='city' id = 'city' >";
showCity = showCity + "</select>";
// showCity = showCity + "<script src='inc/getcity.js'></script>";
showCity = showCity + "<script>initprovcity('','');</script>";
%>
<form name="oblogform" method="post" action="">
<li class="r_right"><%=showCity%></li> <!-- 这一句和上面的月份就可以成为联动了-->
<!-- 输入用户名，即出现相关提示-->
<li><label for="uname"><img src="li_none.gif"" class="okimg" id="d_uname_img" />您的登录名：</label></li>
<li class="r_right">
<input name="username" type="text" id="uname" size="20" maxlength="30" onFocus="on_input('d_uname');this.className='input_onFocus'" onBlur="out_uname();this.className='input_onBlur'" /></li>
<li class="r_msg"><div id="d_uname" class="d_default"></div></li>
<input type="text" name="hello"/>
</form>
</body>
</html>
<script language="javascript">
<!--
/******下面是用户的检测，利用得到焦点和失去焦点，进行提示(oblog45的reg.asp中)*****/
var msg;
var li_ok='0921/li_ok.gif';
var li_err='0921/li_err.gif'
var bname_m=false;
function init_reg(){
msg=new Array(
"请输入4-14位字符，英文、数字的组合。",
"请输入4-14位字符，英文、数字的组合。",
"请输入6位以上字符，不允许空格。",
"请重复输入上面的密码。",
"请选择密码提示问题。",
"5个字符、数字或3个汉字以上（包括6个）。",
"请输入您常用的电子邮箱地址。",
"请输入您的blog名称。",
"请选择您所在的地区。",
"请选择您的blog类别。",
"只有同意注册条款才能完成注册。"
)
document.getElementById("d_uname").innerHTML=msg[0];
//document.getElementById("d_upwd1").innerHTML=msg[2];
//document.getElementById("d_upwd2").innerHTML=msg[3];
//document.getElementById("d_question").innerHTML=msg[4];
//document.getElementById("d_an").innerHTML=msg[5];
//document.getElementById("d_email").innerHTML=msg[6];
//document.getElementById("d_blogname").innerHTML=msg[7];
//document.getElementById("d_city").innerHTML=msg[8];
//document.getElementById("d_usertype").innerHTML=msg[9];
}
init_reg();
function on_input(objname){
var strtxt;
var obj=document.getElementById(objname);
obj.className="d_on";
//alert(objname);
switch (objname){
case "d_uname":
strtxt=msg[0];
break;
/*case "d_udomain":
strtxt=msg[1];
break;
case "d_upwd1":
strtxt=msg[2];
break;
case "d_upwd2":
strtxt=msg[3];
break;
case "d_an":
strtxt=msg[5];
break;
case "d_email":
strtxt=msg[6];
break;
case "d_blogname":
strtxt=msg[7];
break;*/
}
obj.innerHTML=strtxt;
}
function out_uname(){
var obj=document.getElementById("d_uname");
var str=document.getElementById("uname").value;
var chk=true;
//alert(str);
if (str<4 || str>14){chk=false;}
if (chk){
obj.className="d_ok";
obj.innerHTML='用户名已经输入。';
document.getElementById("d_uname_img").src=li_ok;
/*if (document.getElementById("blogname").value=='' || !bname_m){
document.getElementById("blogname").value=document.getElementById("uname").value+"的blog";
out_blogname();
}*/
}else{
obj.className="d_err";
obj.innerHTML=msg[0];
document.getElementById("d_uname_img").src=li_err;
}
return chk;
}
</script>