JS+DIV切换城市。
city.html
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="city.js" charset="utf-8"></script><link href=city.css" rel="stylesheet" type="text/css" /><script>var isFull = 0;</script></head><body><p></p><p></p><p></p><p></p><p></p><p></p><table width="100%"><tr><td width="100%" align="center"><a href="javascript:dsy.open()">[切换城市]</a></td></tr></table><div id="cityList"><ul name="code">body,td,th,li,a {font-size: 12px;font-family: 宋体;}ul {margin: 0px;padding: 0px;}li {list-style: none;}#cityList {width: 320px;height: 320px;position: absolute;left: 1px;top: 1px;background-color: white;display: none;border: 1px solid #999999;}#cityList .head {background-color: #b0d3fb;height: 25px;}.head .title {width: 160px;float: left;text-align: left;height: 25px;line-height: 25px;color: #333333;font-weight: bold;}.head .exit {width: 160px;float: left;text-align: right;height: 25px;line-height: 25px;}.exit a {color: #333333;font-weight: bold;text-decoration: none;}#cityList #content {width: 100%;height: 295px;overflow-x: hidden;overflow-y: auto;}#content .line {width: 100%;height: auto;overflow: inherit;border-bottom: 1px dashed #e0e2e4;padding-top: 10px;padding-bottom: 10px;}.line .pro {width: 60px;text-align: center;font-weight: bold;float: left;line-height: 22px;}.line .city {width: 237px;padding-right: 3px;height: auto;float: right;letter-spacing: 1px;line-height: 20px;}.city a {font-size: 12px;color: #0000ff;}city.js
/** * 切换城市js * * @author HeCheng * @time 2011-03-10 16:46:06 * @return */// 取对象方法function $$(id) {return document.getElementById(id);}// 初始化对象function Citys() {this.provinces = new Array("直辖市", "安徽", "福建", "甘肃", "广东", "广西", "贵州", "海南","河北", "河南", "黑龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏","青海", "山东", "山西", "陕西", "四川", "西藏", "新疆", "云南", "浙江");this.citys = {};}// 添加城市到对象Citys.prototype.add = function(id, iArray) {this.citys[id] = iArray;}// 点击城市时事件Citys.prototype.select = function(i, j) {// 取城市的省名var pro = dsy.provinces[i];// 取城市名var city = dsy.citys[pro][j];alert("当前选择省："+pro+"，市："+city);}// 打开层，填满数据Citys.prototype.open = function() {// 首先判断是否有数据，没有则填充if (isFull == 0) {putData();}$$("cityList").style.display = "block";var html = "";var pro = "";var city = "";var ps = dsy.provinces;var cs = dsy.citys;for ( var i = 0; i < ps.length; i++) {// 取出省名pro = ps[i];html += "<ul class='line'><li class='pro'>";html += pro;html += "</li><li class='city'>";// 取出该省的所有市for ( var j = 0; j < cs[pro].length; j++) {// 将数据组合成ULcity = cs[pro][j];html += "<a href='#' onclick='dsy.select(" + i + "," + j + ")'>"+ city + "</a> ";}html += "</li></ul>";}$$("content").innerHTML = html;}// 关闭层Citys.prototype.close = function() {$$("cityList").style.display = "none";}var dsy = new Citys();// 填充数据function putData() {dsy.add("直辖市", [ "北京", "上海", "天津", "重庆" ]);dsy.add("安徽", [ "安庆", "蚌埠", "巢湖", "池州", "滁州", "阜阳", "合肥", "淮北", "淮南", "黄山","六安", "马鞍山", "宿州", "铜陵", "芜湖", "宣城", "亳州" ]);dsy.add("福建", [ "福州", "龙岩", "南平", "宁德", "莆田", "泉州", "三明", "厦门", "漳州" ]);dsy.add("甘肃", [ "白银", "定西", "甘南藏族自治州", "嘉峪关", "金昌", "酒泉", "兰州", "临夏回族自治州","陇南", "平凉", "庆阳", "天水", "武威", "张掖" ]);dsy.add("广东", [ "广州", "深圳", "潮州", "东莞", "佛山", "河源", "惠州", "江门", "揭阳", "茂名","梅州", "清远", "汕头", "汕尾", "韶关", "阳江", "云浮", "湛江", "肇庆", "中山", "珠海" ]);dsy.add("广西", [ "百色", "北海", "崇左", "防城港", "桂林", "贵港", "河池", "贺州", "来宾","柳州", "南宁", "钦州", "梧州", "玉林" ]);dsy.add("贵州", [ "贵阳", "六盘水", "遵义", "安顺", "铜仁", "黔西南", "毕节", "黔东南", "黔南" ]);dsy.add("海南", [ "白沙黎族自治县", "保亭黎族苗族自治县", "昌江黎族自治县", "澄迈县", "定安县", "东方","海口", "乐东黎族自治县", "临高县", "陵水黎族自治县", "琼海", "琼中黎族苗族自治县", "三亚", "屯昌县","万宁", "文昌", "五指山", "儋州" ]);dsy.add("河北", [ "保定", "沧州", "承德", "邯郸", "衡水", "廊坊", "秦皇岛", "石家庄", "唐山","邢台", "张家口" ]);dsy.add("河南", [ "安阳", "鹤壁", "济源", "焦作", "开封", "洛阳", "南阳", "平顶山", "三门峡","商丘", "新乡", "信阳", "许昌", "郑州", "周口", "驻马店", "漯河", "濮阳" ]);dsy.add("黑龙江", [ "大庆", "大兴安岭", "哈尔滨", "鹤岗", "黑河", "鸡西", "佳木斯", "牡丹江","七台河", "齐齐哈尔", "双鸭山", "绥化", "伊春" ]);dsy.add("湖北", [ "鄂州", "恩施土家族苗族自治州", "黄冈", "黄石", "荆门", "荆州", "潜江", "神农架林区","十堰", "随州", "天门", "武汉", "仙桃", "咸宁", "襄樊", "孝感", "宜昌" ]);dsy.add("湖南", [ "常德", "长沙", "郴州", "衡阳", "怀化", "娄底", "邵阳", "湘潭","湘西土家族苗族自治州", "益阳", "永州", "岳阳", "张家界", "株洲" ]);dsy.add("吉林",[ "白城", "白山", "长春", "吉林", "辽源", "四平", "松原", "通化", "延边朝鲜族自治州" ]);dsy.add("江苏", [ "常州", "淮安", "连云港", "南京", "南通", "苏州", "宿迁", "泰州", "无锡","徐州", "盐城", "扬州", "镇江" ]);dsy.add("江西", [ "抚州", "赣州", "吉安", "景德镇", "九江", "南昌", "萍乡", "上饶", "新余","宜春", "鹰潭" ]);dsy.add("辽宁", [ "鞍山", "本溪", "朝阳", "大连", "丹东", "抚顺", "阜新", "葫芦岛", "锦州","辽阳", "盘锦", "沈阳", "铁岭", "营口" ]);dsy.add("内蒙古", [ "阿拉善盟", "巴彦淖尔盟", "包头", "赤峰", "鄂尔多斯", "呼和浩特", "呼伦贝尔", "通辽","乌海", "乌兰察布盟", "锡林郭勒盟", "兴安盟" ]);dsy.add("宁夏", [ "固原", "石嘴山", "吴忠", "银川" ]);dsy.add("青海", [ "果洛藏族自治州", "海北藏族自治州", "海东", "海南藏族自治州", "海西蒙古族藏族自治州","黄南藏族自治州", "西宁", "玉树藏族自治州" ]);dsy.add("山东", [ "滨州", "德州", "东营", "菏泽", "济南", "济宁", "莱芜", "聊城", "临沂", "青岛","日照", "泰安", "威海", "潍坊", "烟台", "枣庄", "淄博" ]);dsy.add("山西", [ "长治", "大同", "晋城", "晋中", "临汾", "吕梁", "朔州", "太原", "忻州", "阳泉","运城" ]);dsy.add("陕西",[ "安康", "宝鸡", "汉中", "商洛", "铜川", "渭南", "西安", "咸阳", "延安", "榆林" ]);dsy.add("四川", [ "阿坝藏族羌族自治州", "巴中", "成都", "达州", "德阳", "甘孜藏族自治州", "广安", "广元","乐山", "凉山彝族自治州", "眉山", "绵阳", "南充", "内江", "攀枝花", "遂宁", "雅安", "宜宾","资阳", "自贡", "泸州" ]);dsy.add("西藏", [ "阿里", "昌都", "拉萨", "林芝", "那曲", "日喀则", "山南" ]);dsy.add("新疆", [ "阿克苏", "阿拉尔", "巴音郭楞蒙古自治州", "博尔塔拉蒙古自治州", "昌吉回族自治州", "哈密","和田", "喀什", "克拉玛依", "克孜勒苏柯尔克孜自治州", "石河子", "图木舒克", "吐鲁番", "乌鲁木齐","五家渠", "伊犁哈萨克自治州" ]);dsy.add("云南", [ "保山", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "迪庆藏族自治州","红河哈尼族彝族自治州", "昆明", "丽江", "临沧", "怒江傈傈族自治州", "曲靖", "思茅","文山壮族苗族自治州", "西双版纳傣族自治州", "玉溪", "昭通" ]);dsy.add("浙江", [ "杭州", "湖州", "嘉兴", "金华", "丽水", "宁波", "绍兴", "台州", "温州", "舟山","衢州" ]);isFull = 1;}