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

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);

});

});

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

運行效果如下：

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

希望本文所述對大家jQuery程序設計有所幫助。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。