基于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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php 生成随机验证码图片代码
2010/02/08 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Sublime开发python程序的示例代码
2018/01/24 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
运动会200米广播稿
2015/08/19 职场文书
总经理聘用协议书
2015/09/21 职场文书
Python制作春联的示例代码
2022/01/22 Python