<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
#address{
border:1px solid #CCCCCC;
padding:6px 16px 4px 4px;
background: url(1.gif) no-repeat 80px center;
width:80px;
height:20px;
text-align:center;
cursor:pointer;
}
*{
padding:0;
margin:0;
}
ul{
margin:0px;
padding:5px;
font-size:12px;
}
a{
color:#009999;
text-decoration:none;
}
a:hover{
background-color:#006699;
color:#FFFFFF;
text-decoration:underline;
}
li{
list-style:none;
width:38px;
padding:2px 2px;
display:inline-block;
}
#citys{
border:1px solid #FF0000;
width:336px;
position:relative;
}
#citys span{
padding:5px;
}
#smallCity{
border-top:1px solid #CCCCCC;
}
#cancel{
position:absolute;
width:20px;
height:20px;
cursor:pointer;
top:0px;
right:0px;
border:1px solid #333;
text-align:center;
font-size:16px;
line-height:20px;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="address">上海</div>
<div id="citys" style="display:none">
<span>请选择省份</span>
<ul id="bigCity">
<li><a href="#" class="city">重庆</a></li>
<li><a href="#" class="city">天津</a></li>
<li><a href="#" class="city">上海</a></li>
<li><a href="#" class="city">北京</a></li>
</ul>
<ul id="province">
<li><a id="zj" class="province" href="#">浙江</a></li>
<li><a id="ah" class="province" href="#">安徽</a></li>
<li><a id="sc" class="province" href="#">四川</a></li>
<li><a id="gz" class="province" href="#">贵州</a></li>
<li><a id="yn" class="province" href="#">云南</a></li>
<li><a id="hn" class="province" href="#">湖南</a></li>
<li><a id="gd" class="province" href="#">广东</a></li>
<li><a id="sd" class="province" href="#">山东</a></li>
</ul>
<ul id="smallCity" style="display:none">
<!--浙江-->
<li><a class="zjCity" href="#">宁波</a></li>
<li><a class="zjCity" href="#">杭州</a></li>
<li><a class="zjCity" href="#">温州</a></li>
<li><a class="zjCity" href="#">台州</a></li>
<li><a class="zjCity" href="#">绍兴</a></li>
<!--广东-->
<li><a class="gdCity" href="#">广州</a></li>
<li><a class="gdCity" href="#">深圳</a></li>
<li><a class="gdCity" href="#">中山</a></li>
<li><a class="gdCity" href="#">珠海</a></li>
<li><a class="gdCity" href="#">汕头</a></li>
<li><a class="gdCity" href="#">东莞</a></li>
<li><a class="gdCity" href="#">梅州</a></li>
<!--安徽-->
<li><a class="ahCity" href="#">合肥</a></li>
<li><a class="ahCity" href="#">芜湖</a></li>
<li><a class="ahCity" href="#">宣城</a></li>
<li><a class="ahCity" href="#">池州</a></li>
<li><a class="ahCity" href="#">六安</a></li>
<!--四川-->
<li><a class="scCity" href="#">成都</a></li>
<li><a class="scCity" href="#">雅安</a></li>
<li><a class="scCity" href="#">广安</a></li>
<!--贵州-->
<li><a class="gzCity" href="#">贵阳</a></li>
<li><a class="gzCity" href="#">遵义</a></li>
<!--云南-->
<li><a class="ynCity" href="#">昆明</a></li>
<li><a class="ynCity" href="#">丽江</a></li>
<!--湖南-->
<li><a class="hnCity" href="#">长沙</a></li>
<li><a class="hnCity" href="#">株洲</a></li>
<li><a class="hnCity" href="#">常德</a></li>
<!--山东-->
<li><a class="sdCity" href="#">济南</a></li>
<li><a class="sdCity" href="#">青岛</a></li>
</ul>
<p id="cancel">×</p>
</div>
<script type="text/javascript">
/*
* 选择城市
* made by keimon
* 2013-03-21
*/
$(function(){
$("#address").click(function(){
$("#citys").show();
});
$("#cancel").click(function(){
$("#citys").hide();
});
$(".province").click(function(){
$("#smallCity").show()
.find("li").hide();
$("."+this.id + "City").parent("li").show();
$("."+this.id + "City").click(function(){
$("#address").html($(this).html())
.siblings("#citys").hide();
});
})
$("#bigCity a").click(function(){
$("#address").html($(this).html())
.siblings("#citys").hide();
})
})
</script>
</body>
</html>
相关推荐
城市 <!-- 表格数据 --> $(document).ready(function() { $('.resizable').resizableColumns(); }); ``` 五、优化与拓展 1. **存储列宽**：可以将用户调整后的列宽保存在本地存储或服务器，...
在网页开发中，尤其是针对移动设备的WAP网站，用户可能会需要选择他们的所在省份、城市以及区县。这种情况下，一个高效且用户友好的三级联动选择菜单就显得尤为重要。"jQuery三级地区联动选择菜单jquery-1.9.1.js...
`jquery-china-map`利用jQuery的这些特性，实现地图元素的选择、操作和事件响应。 ### 2. 地图插件原理 地图插件通常基于SVG（Scalable Vector Graphics）或Canvas绘制地图图形，`jquery-china-map`也不例外。SVG...
在“JQuery－－省市区的选择”这个主题中，我们将探讨如何利用jQuery来创建一个动态的省市区选择功能，让用户能够方便地在网页上选取他们所在的省份、城市和区县。 首先，我们需要理解HTML结构。在这个场景中，我们...
例如，在一个国家-城市-区县的三级联动中，当用户选择了某个国家后，对应的省市区级 select 将只显示该国的相关选项。这种联动效果可以通过监听第一个 select 的 `change` 事件并更新其他 select 的选项来实现。 在...
《jQuery下拉选择城市插件hhDrop深度解析与应用》 在网页开发中，用户界面的设计和交互体验至关重要。为了提升用户体验，许多开发者选择使用jQuery这一强大的JavaScript库来实现复杂的功能，例如动态下拉选择城市的...
3. 使用jQuery选择器选中表格，并调用jqtreetable方法初始化。 4. 可以通过配置参数来定制树表的行为和外观。 **jquery-treeview** jquery-treeview是另一个流行的jQuery插件，主要用于创建可折叠的树形列表。它...
本示例“jquery - 1.4.2 省市县数据级联选择”是一个利用jQuery实现的三级联动选择功能，适用于网页表单中需要用户依次选择省份、城市和县（区）的场景。这个功能常见于中国的网站，因为中国的行政区域分为省、市、...
这种设计常见于多层级分类或者有依赖关系的数据选择中，如省份-城市-区县的三级选择。 **项目结构** `jquery-cascading-dropdown-master`目录包含了项目的主要文件和资源： 1. `dist/` - 包含编译后的CSS和JS文件，...
"jquery下拉选择城市插件"是基于jQuery的一个功能扩展，主要用于实现用户在下拉菜单中选择各级城市的功能。这种插件通常用于网站的地址填写或者定位服务，为用户提供方便快捷的交互体验。 首先，我们要理解jQuery的...
在选择一个城市后，根据所选城市动态加载对应的部门列表。这种联动效果可以通过监听城市选择框的`change`事件，触发Ajax请求，获取并填充部门选项。使用jQuery，我们可以方便地绑定事件并处理响应： ```javascript ...
《jQuery城市选择插件详解与应用实践》 在网页开发中，实现用户友好的城市选择功能是一项常见的需求。为此，开发者通常会借助于各种插件来简化这一过程，"jQuery城市选择插件"便是其中的一种高效解决方案。这个插件...
很精美的城市选择器，跟日期选择器效果差不多。 最新版本1.1.0 有网友说没有反应。报错！！本人已经有IE6,IE7,IE8,fireFox上测试过了。没有任何问题。 注意。例用之间请先引入jquery.js库文件。再引入此文件。css...
《jQuery城市选择器详解》 在网页开发中，经常需要实现一种功能，即用户可以选择他们的所在省份和城市，这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具，它利用JavaScript和...
jQuery FillOptions 是一个用于创建多级联动菜单的插件，它能够帮助开发者快速实现下拉菜单之间的级联效果，为用户界面提供更加交互性和动态的选择体验。在网页设计中，这种级联菜单通常用于地区选择、类别导航或者...
标题中的“jQuery按拼音首字母选择城市”是指一个基于JavaScript库jQuery实现的交互式城市选择功能，它允许用户根据城市名称的拼音首字母快速定位并选择城市。这种功能常见于各类生活服务类网站，如58同城、携程等，...
//------选择后确定按钮 $(".btntest1").click(function () { var areas = GetChecked().join(",");//已选择的城市名 $("#areas").html(areas);//显示在页面 $("#selectedareas").val(areas);//存入隐藏的input...
这种插件通常基于JavaScript库jQuery构建，能够实现省份、城市、区县三级选择的联动效果，即当用户选择一个省份时，相关的城市会自动加载，接着选择城市后，对应的区县也会动态显示。这样的设计不仅提高了用户体验，...
本项目“Jquery实现城市选择”旨在利用jQuery创建一个美观且交互性强的城市选择功能，为用户提供友好的界面体验。 一、jQuery基础 jQuery的核心特性是其选择器功能，它允许开发者通过CSS样式选择器快速定位到页面上...
jquery 城市选择器代码