基于jQuery实现仿51job城市选择功能实例代码


Posted in Javascript onMarch 02, 2016

前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图

基于jQuery实现仿51job城市选择功能实例代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.min.js" ></script> 
<style type="text/css">
#provinceDiv{ list-style:none;}
#provinceDiv li{ list-style:none; border-bottom:1px dotted #ccc; width:400px; height:20px;margin-bottom:3px;}
#provinceDiv li span{ display:block; width:60px; height:20px; float:left; line-height:20px; text-align:center; position:relative;}
#provinceDiv li span:hover{ background:#fb0;}
#provinceDiv li span.current{ background:#fb0;}
div.cityDiv{ border:1px solid #ccc; width:auto; width:100px;_width:100px; height:100px;_height:100px;height:auto; background:#eff7ff; display:none; position:absolute; padding:2px;}
div.cityDiv a{ display:block; text-decoration:none; color:#000;}
div.cityDiv a:hover{ background:#fb0;}
</style>
<script type="text/javascript">
$(function () {
var isoncityDiv = false; //是否在cityDiv上,默认为false
$("span").bind("click", function () {
var spanid = $(this).attr("id"); //获取当前spanid
$("span").not("#" + spanid).removeClass("current");
$(this).addClass("current");
$("div.cityDiv").remove(); //立即移除所有动态创建的div
var spanCurrent = $("#" + $(this).attr("id")); //当前点击的sapn对象
var tipDiv = $("<div id='city_" + $(this).attr("id") + "' class='cityDiv'></div>"); //动态创建城市div
tipDiv.html(System_Select_City.GetCity(spanid).value);//后台输出的数据包含城市数据
tipDiv.bind("mouseover", function () {
tipDiv.show();
isoncityDiv = true; //鼠标在其上为true
}).bind("mouseout", function () {
tipDiv.hide();
});
$("body").append(tipDiv); //加入body 
var top = spanCurrent.offset().top; //获取top
var left = spanCurrent.offset().left; //获取left
tipDiv.offset({ top: top + 20, left: left + 60 });
tipDiv.show(); //获取显示div 
}).bind("mouseout", function () {
var spanCurrent = $("#city_" + $(this).attr("id"));
var a = function () {
if (!isoncityDiv) { //不在 弹出的div上时候 执行
spanCurrent.remove();
}
clearTimeout(int);
};
var int = setTimeout(a, 3000);
});
});
//关闭谈出口
function show(title) {
parent.closeDiv(title);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="provinceDiv">
<li> <a>直辖市</a></li>
<li>
<span id="11">北京</span>
<span id="31">上海</span>
<span id="50">重庆</span>
<span id="12">天津</span>
</li>
<li><a>省区</a></li>
<li>
<span id="13">河北</span>
<span id="14">山西</span> 
<span id="15">内蒙古</span>
<span id="21">辽宁</span>
<span id="22">吉林</span>
<span id="23">黑龙江</span> 
</li>
<li> 
<span id="32">江苏</span>
<span id="33">浙江</span>
<span id="34">安徽</span>
<span id="35">福建</span>
<span id="36">江西</span>
<span id="37">山东</span> 
</li>
<li>
<span id="41">河南</span>
<span id="42">湖北</span>
<span id="43">湖南</span>
<span id="44">广东</span>
<span id="45">广西</span>
<span id="46">海南</span>
</li>
<li> 
<span id="51">四川</span>
<span id="52">贵州</span>
<span id="53">云南</span>
<span id="54">西藏</span>
<span id="61">陕西</span>
<span id="62">甘肃</span>
</li> 
<li> 
<span id="63">青海</span>
<span id="64">宁夏</span>
<span id="65">新疆</span>
<span id="71">台湾</span>
<span id="81">香港</span>
<span id="91">澳门</span>
</li> 
</ul>
</div> 
</form>
</body>
</html>

以上内容给大家介绍了基于jQuery实现仿51job城市选择功能实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 #Javascript
js密码强度实时检测代码
Mar 02 #Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 #Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 #Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 #Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 #Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
详解Python time库的使用
2019/10/10 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python几种常见算法汇总
2020/06/02 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Python用户自定义异常的实现
2020/12/25 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
厨房工作人员岗位职责
2013/11/15 职场文书
出纳员的岗位职责
2014/02/22 职场文书
三方股份合作协议书
2014/10/13 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
初二物理教学反思
2016/02/19 职场文书