JS+DIV切换城市。

最新推荐文章于 2021-06-05 06:53:28 发布

hecheng_job

最新推荐文章于 2021-06-05 06:53:28 发布

阅读量519

点赞数

分类专栏：其他文章标签： prototype CSS HTML J# Struts

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[b]city.html[/b]


<%@ 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>

[b]city.css[/b]


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;
}

[b]city.js[/b]


/**
 * 切换城市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;
}