前些文章用寫過，省市縣三級聯動，但是感覺選擇的時候不夠直觀，現在改進了下，效果如下圖
<%@ 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(); //立即移除所有動態創建的divvar spanCurrent = $("#" + $(this).attr("id")); //當前點擊的sapn對象var tipDiv = $("<div id='city_" + $(this).attr("id") + "' class='cityDiv'></div>"); //動態創建城市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);}</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城市選擇功能實例代碼，希望對大家有所幫助！
新聞熱點
疑難解答
