基于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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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中http_build_query 的一个问题
2012/03/25 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
深入理解Node module模块
2018/03/26 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
亿企通软件测试面试题
2012/04/10 面试题
高中生的自我评价
2014/03/04 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
创先争优演讲稿
2014/09/15 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
退休教师追悼词
2015/06/23 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers