本文實(shí)例講述了jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

www.jb51.net jQuery城市選擇框

#parent{

width:500px;

position:relative;

}

#text{

height:25px;

}

#select{

width:420px;

height:185px;

position:absolute;

top:31px;

left:0;

background:#eeeeee;

}

.cities{

width:60px;

height:25px;

line-height:25px;

margin:5px 5px 0 5px;

float:left;

text-align:center;

font-family:'Times New Roman';

font-size:15px;

cursor:pointer;

}

$(document).ready(function(){

$("#select").hide();

$("#text").focus(function(){

$("#select").show();

});

$(".cities").click(function(){

$("#text").val($(this).text());

$("#select").hide();

});

$("#text").blur(function(){

setTimeout(function(){

$("#select").hide();

}, 300);

});

});

烏魯木齊蘭州西寧拉薩呼和浩特哈爾濱長(zhǎng)春沈陽(yáng)三亞北京天津太原濟(jì)南銀川西安鄭州南京杭州福州廣州臺(tái)北南寧昆明成都重慶貴陽(yáng)長(zhǎng)沙南昌合肥武漢上海海口香港澳門(mén)

運(yùn)行效果如下：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun 測(cè)試一下運(yùn)行效果。

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。