基于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 相关文章推荐
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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的无限分类实现想法~
2007/01/02 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue 自定义指令功能完整实例
2019/09/17 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
35个Python编程小技巧
2014/04/01 Python
使用Python的内建模块collections的教程
2015/04/28 Python
Python脚本处理空格的方法
2016/08/08 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python调用百度语音识别api
2018/08/30 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
中软Java笔试题
2012/11/11 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
清扬洗发水广告词
2014/03/14 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
三八妇女节慰问信
2015/02/14 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Java 定时任务技术趋势简介
2022/05/04 Java/Android