JS+DIV切换城市。
city.html
city.css
city.js
<%@ 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 class="head"> <li class="title"> 选择城市</li> <li class="exit"><a href="javascript:dsy.close()">关闭</a> </li> </ul> <div id="content"> </div> </div> </body> </html>
city.css
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++) {
// 将数据组合成UL
city = 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;
}