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 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;
}
分享到：
相关推荐
团购 js切换城市 js+css+div
在“js弹出层城市切换效果”这个主题中，我们将深入探讨如何利用JavaScript技术创建一个弹出的城市选择窗口，并实现平滑的城市切换效果。 首先，弹出层通常指的是在网页上动态显示或隐藏的元素，如模态框、提示框或...
在JavaScript（JS）编程中，"城市切换"是一种常见的功能，尤其在网站中，用于提供用户选择不同地域服务的能力。这个功能通常涉及到DOM操作、事件处理以及可能的数据获取或渲染。下面将详细解释这一功能的设计与实现...
总结来说，这个JavaScript拖曳互换div位置的实现利用了DOM拖放API，通过监听拖放相关的事件，并通过精心设计的DOM操作来实现元素位置的交换，为用户提供了一种直观的交互方式，常用于GIS中的图层切换顺序控制或其他...
《jQuery实现网易电影票切换城市选项卡》 在前端开发中，用户界面的交互性是提升用户体验的关键因素之一。网易电影票的切换城市功能就是一个很好的例子，它利用了JavaScript库jQuery的强大功能，结合HTML和CSS，...
在本项目中，我们主要探讨的是一个利用React技术构建的旅游城市图片百叶窗切换特效。这个特效设计用于全屏展示各个旅游城市的景点图片，并且配备了文字描述以及左右圆形箭头按钮，使得用户可以通过点击这些按钮来...
在介绍如何使用JavaScript实现网页顶部向下滑出的城市切换导航效果之前，需要了解一些基础知识。首先是网页制作的基础知识，包括HTML、CSS和JavaScript的基本概念及其在网页开发中的应用。接下来是具体知识点的介绍...
《JS弹出层风格全国城市选择菜单的实现与解析》 在网页设计中，用户交互体验是至关重要的因素之一，而高效、友好的选择菜单则是提升用户体验的关键元素。本篇文章将详细探讨“js弹出层风格的全国城市选择菜单”的...
2. 初始化ECharts实例，设置容器（如div元素）。 3. 配置ECharts的option对象，包括地图类型、数据源、颜色映射、标记等。 4. 调用`myChart.setOption(option)`方法，加载配置好的地图。 例如，创建中国地图并显示...
【js仿携程网机票城市选择器代码】是一个用于在网页上实现类似携程网机票预订时的城市选择功能的JavaScript实现。这个代码示例主要是为桌面端设计的，特别强调不适用于移动端，因此在移动设备上可能无法正常工作或...
为了实现字母顺序的筛选，开发者可能使用了JavaScript的`filter()`方法，根据用户输入的首字母筛选对应的城市，并更新显示。同时，可能还有一个搜索输入框，监听`keyup`事件，以便在用户输入时实时过滤结果。 此外...
5. **用户体验**：为了提升用户体验，我们可以添加一些动画效果，比如使用`fadeIn`和`fadeOut`来平滑地切换城市列表，或者使用`slideToggle`来实现展开和收起的效果。 6. **响应式设计**：考虑到移动设备的使用，...
- **Webstorm**: JetBrains的JavaScript IDE，专为Web和Node.js开发设计。 - **Notepad++**: 免费的源代码编辑器和支持语法高亮、语法折叠等多种功能。 ### 六、综合实践 通过以上知识点的学习与实践，学生能够...
【jQuery热门城市文字标签云代码】是一个基于JavaScript库jQuery实现的动态效果，它主要用于展示热门城市的标签云。这种效果在网站上通常用于显示用户最常访问或搜索的城市，以一种视觉吸引人的形式呈现，使信息更易...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用开发...以上就是使用JS获取天气预报的基本流程和关键知识点，通过实践和不断学习，你可以构建出更复杂的天气应用，包括实时更新、多城市切换等功能。
`div`元素是布局的重要组成部分，JavaScript可以用来控制这些`div`的显示和隐藏，创建悬浮或点击触发的菜单。这些菜单可以在鼠标悬停或点击特定元素时出现，提供更多的操作选项。 "文本编辑器"是指网页中的富文本...
对于更复杂的交互，可以使用JavaScript库如jQuery或现代的React、Vue.js等。例如，使用jQuery动态加载省市区数据： ```javascript $(document).ready(function() { $('#country').on('change', function() { var ...
<script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script> *{ margin:0; padding:0; border:0; list-style:none} img{ display:block; border:0} body{ padding:50px;} ...
在本文中，我们将深入探讨如何使用CSS3的keyframes属性创建一个卡通白天夜晚动画场景切换的特效。这个特效允许用户通过点击场景中的太阳和月亮来切换白天与夜晚的动画效果，为网页添加了生动有趣的互动性。 首先，...
城市列表的实现是一种常见的UI设计，特别是在移动应用和网页中，用于展示大量地理位置信息。在本项目中，我们将探讨如何创建一个具有可折叠功能的城市列表，同时在头部添加热门城市，提升用户体验。以下是对这个话题...