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

 #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;}$(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(); //立即移除所有动态创建的divvar spanCurrent = $("#" + $(this).attr("id")); //当前点击的sapn对象var tipDiv = $("
"); //动态创建城市divtipDiv.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; //获取topvar left = spanCurrent.offset().left; //获取lefttipDiv.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);}
 直辖市北京上海重庆天津省区河北山西 内蒙古辽宁吉林黑龙江  江苏浙江安徽福建江西山东 河南湖北湖南广东广西海南 四川贵州云南西藏陕西甘肃  青海宁夏新疆台湾香港澳门