浅谈jQuery模拟12306城市选择框的实现

筱葭

于 2016-12-29 19:14:23 发布

阅读量1.7k

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53931518

版权

本文通过一个简单的HTML和jQuery示例，展示了如何使用jQuery来模拟12306网站的城市选择框效果。当用户聚焦输入框时，会出现包含多个城市的列表，点击城市后，输入框将显示所选城市，并在失去焦点后自动隐藏城市列表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<title></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="js/jquery-1.6.2.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(){
					setTim