本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html> <html> <head> <title> jQuery城市选择框</title> <style> #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; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(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); }); }); </script> </head> <body> <div> <input type="text"> <div> <div>乌鲁木齐</div> <div>兰州</div> <div>西宁</div> <div>拉萨</div> <div>呼和浩特</div> <div>哈尔滨</div> <div>长春</div> <div>沈阳</div> <div>三亚</div> <div>北京</div> <div>天津</div> <div>太原</div> <div>济南</div> <div>银川</div> <div>西安</div> <div>郑州</div> <div>南京</div> <div>杭州</div> <div>福州</div> <div>广州</div> <div>台北</div> <div>南宁</div> <div>昆明</div> <div>成都</div> <div>重庆</div> <div>贵阳</div> <div>长沙</div> <div>南昌</div> <div>合肥</div> <div>武汉</div> <div>上海</div> <div>海口</div> <div>香港</div> <div>澳门</div> </div> </div> </body> </html>
运行效果如下：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具： 测试一下运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章: