How to realize the function of simulating 12306 city selection box by jQuery

这篇文章主要讲解了"jQuery怎么实现模拟12306城市选择框功能"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"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); }); }); 乌鲁木齐 兰州 西宁 拉萨 呼和浩特 哈尔滨 长春 沈阳 三亚 北京 天津 太原 济南 银川 西安 郑州 南京 杭州 福州 广州 台北 南宁 昆明 成都 重庆 贵阳 长沙 南昌 合肥 武汉 上海 海口 香港 澳门

运行效果如下：

Thank you for reading, the above is "jQuery how to achieve simulation 12306 city selection box function" of the content, after the study of this article, I believe that everyone on jQuery how to achieve simulation 12306 city selection box function This problem has a deeper understanding, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!