html 12306页面实现,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);
});
});
运行效果如下：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试一下运行效果。
希望本文所述对大家jQuery程序设计有所帮助。
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例相关推荐
- 类似于铁道部12306的城市选择框的实现
第一次写,有点小紧张... 这两天研究铁道部的余票查询系统,参考网上大牛们的经典案例,也有了一些自己的心得,写在自己程序猿的道路上记录一下,也和大家一起分享,写的不好莫怪,大牛可以自动过滤,非喜勿喷, ...
- php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
- php 购买车票,jQuery实现买火车票城市选择切换功能
大家在买火车票的时候都会选择不同的城市,本文通过实例代码给大家分享了jQuery实现火车票买票城市选择切换功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家. 效果图如下所示: s ...
- python 12306登录_python爬虫--模拟12306登录
模拟12306登录 超级鹰: #!/usr/bin/env python # coding:utf-8 import requests from hashlib import md5 class Ch ...
- python 12306登录 2019_python爬虫--模拟12306登录
模拟12306登录 超级鹰: #!/usr/bin/env python # coding:utf-8 import requests from hashlib import md5 class Ch ...
- jQuery日期弹出选择框Datepicker效果
无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目:本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性. 教程目标:教会 ...
- jquery.chosen.css,jquery-chosen 选择框插件
Chosen 是一个 JavaScript 插件,它能让丑陋的.很长的 select 选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. ...
- ajax提交时页面转圈,jquery的ajax提交时loading提示的处理方法
方法1:使用ajaxStart方法定义一个全局的"加载中..."提示 $(function(){ $("#loading").ajaxStart(functio ...
- jQuery世界国家城市选择插件
下载地址 这款jQuery国家选择插件样式挺好看,世界国家城市多级联动选择功能很强大,不仅支持全世界各个国家城市的多级联动,而且每一级都支持关键词搜索,可以快速定位需要选择的国家和城市. dd:
最新文章
- python 数据分析学什么-如何学习Python数据分析呢？老男孩Python培训
- Spark详解（九）：Spark存储原理分析
- FileZilla 连接不上虚拟机 ubuntu
- Python第二周 str的方法
- oracle数据库表空间文件收缩实例
- Django中使用缓存
- js保存html页面的图片,html使用js截取页面保存为图片
- 怎么去除三角下拉_用什么方法可以有效去除外墙涂料？
- linux系统漏洞修复2019,Linux中 OpenSSH 输入验证错误漏洞(CVE-2019-16905) 修复解决方案...
- 接口测试系列：工作中所用（十：配置文件的读写操作 configparser模块）
- 20个经典Android游戏源码下载地址（持续更新~）
- 计算机共享修复方法,打印机无法共享怎么办,教您修复打印机共享问题
- 智慧交通规划设计方案解析
- 计算机网络第七版谢希仁习题,计算机网络 释疑与习题解答 谢希仁 第7七版 计算机网络(第7版)谢...
- 智能驾驶的狂想与现实落地
- 《北国之春》--华为总裁：任正非
- 北京科技大学计算机专业在哪个校区,北京科技大学有几个校区及校区地址
- 2022最新鸽哒IM即时通讯系统源码+带安装教程
- 现在做Android开发有前途吗？Android面试题及解析
- Java开发中各类名词解释大全