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

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

% @ 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。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head id=' head 1 ' runat=' server ' title/title脚本类型=' text/JavaScript ' src=' http 3360./js/jquery-1.7。量滴js /脚本样式类型=' text/CSS ' # ProvinCeDiv { list-style : none；} # ProvinCeDiV李{列表式：无；边框-底部：1px虚线# ccc宽度宽度：400像素高度：20 px保证金-底部：3 px} # ProvinCe DiV Li span {显示：块；宽度：60 px高度：20 pxfloat:left线高：20 px文本对齐：居中；位置：相对；} # ProvinCeDiV李span :悬停{后台： # fb0} # ProvinCeDiV Li span。当前{背景： # fb0} div。city div { border :1 px solid # CCC；宽度：汽车；宽度宽度：100px_宽度：100px高度：100 px_ height :100 px h8 : auto背景： # eff 7 ffdisplay:none位置：绝对；padding:2px }分区。city div a { display : block文本装饰：无；color: # 000} div。city div a :悬停{背景： # fb0}/style脚本类型=' text/JavaScript ' $(function(){ var Isoncity div=false；//是否在城市分区上，默认为false $(“span”).bind('click ')，function(){ var spand=$(this).attr(' id ')；//获取当前西班牙语$(“span”).不是(' # '西班牙语)。removeClass(“”当前');$(这个)。添加CLaSS(' current ')；$('div.cityDiv ').移除();//立即移除所有动态创建的divvar spanCurrent=$('#' $(this).attr(' id ')；//当前点击的sapn对象var TipDiv=$(' Div id=' city _ ' $(this).attr(' id ')' ' class=' city div '/div ')；//动态创建城市系统选择城市GetCity(西班牙语)。值);//后台输出的数据包含城市数据tipDiv.bind('mouseover '，function(){ TipDiv。show()；isocity div=true//鼠标在其上为true}).bind('mouseout '，function(){ TipDiv。hide()；});$(“正文”).追加(TipDiv)；//加入body var top=spanCurrent.offset().顶部；//获取topvar left=spanCurrent.offset().向左；//获取左tipdiv。偏移量({ top : top 20，left : left 60 })；tipdiv。show()；//获取显示div }).bind('mouseout '，function(){ var SPan current=$(' # city _ ' $(this)).attr(' id ')；var a=function () {if(！isocity div){//不在弹出的差异上时候执行当前。移除()；} clear time out(int)；};var int=setTimeout(a，3000)；});});//关闭谈出口函数显示(标题){父级。closediv(标题)；}/script/head dyform id=' form 1 ' runat=' server ' divul id=' ProvinceDiv '阿利直辖市/a/lilispan id='11 '北京/spanspan id='31 '上海/spanspan id='50 '重庆/spanspan id='12 '天津/span/lilia省区/a/lilispan id='13 '河北/spanspan id='14 '山西/span span id='15 '内蒙古/spanspan id='21 '辽宁/spanspan id='22 '吉林/spanspan id='23 '黑龙江/span /lili span id='32 '江苏/spanspan id='33 '浙江/spanspan id='34 '安徽/spanspan id='35 '福建/spanspan id='36 '江西/spanspan id='37 '山东/span /lilispan id='41 '河南/spanspan id='42 '湖北/spanspan id='43 '湖南/spanspan id='44 '广东/spanspan id='45 '广西/spanspan id='46 '海南/span/lili span id='51 '四川/spanspan id='52 '贵州/spanspan id='53 '云南/spanspan id='54 '西藏/spanspan id='61 '陕西/spanspan id='62 '甘肃/span/li li span id='63 '青海/spanspan id='64 '宁夏/spanspan id='65 '新疆/spanspan id='71 '台湾/spanspan id='81 '香港/spanspan id='91 '澳门/span/Li/ul/div/表单/正文/html以上内容给大家介绍了基于jQuery实现仿51工作城市选择功能实例代码，希望对大家有所帮助！