jQuery模拟12306城市选择框功能简单实现方法示例


Posted in jQuery onAugust 13, 2018

本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <title>3water.com 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="http://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 id="parent">
      <input type="text" id="text">
      <div id="select">
        <div class="cities">乌鲁木齐</div>
        <div class="cities">兰州</div>
        <div class="cities">西宁</div>
        <div class="cities">拉萨</div>
        <div class="cities">呼和浩特</div>
        <div class="cities">哈尔滨</div>
        <div class="cities">长春</div>
        <div class="cities">沈阳</div>
        <div class="cities">三亚</div>
        <div class="cities">北京</div>
        <div class="cities">天津</div>
        <div class="cities">太原</div>
        <div class="cities">济南</div>
        <div class="cities">银川</div>
        <div class="cities">西安</div>
        <div class="cities">郑州</div>
        <div class="cities">南京</div>
        <div class="cities">杭州</div>
        <div class="cities">福州</div>
        <div class="cities">广州</div>
        <div class="cities">台北</div>
        <div class="cities">南宁</div>
        <div class="cities">昆明</div>
        <div class="cities">成都</div>
        <div class="cities">重庆</div>
        <div class="cities">贵阳</div>
        <div class="cities">长沙</div>
        <div class="cities">南昌</div>
        <div class="cities">合肥</div>
        <div class="cities">武汉</div>
        <div class="cities">上海</div>
        <div class="cities">海口</div>
        <div class="cities">香港</div>
        <div class="cities">澳门</div>
      </div>
    </div>
  </body>
</html>

运行效果如下:

jQuery模拟12306城市选择框功能简单实现方法示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun 测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
基于python实现微信模板消息
2015/12/21 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
基于python3实现倒叙字符串
2020/02/18 Python
优秀教师的感人事迹
2014/02/04 职场文书
揭牌仪式主持词
2014/03/19 职场文书
食品销售计划书
2014/04/26 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2014公司年终工作总结
2014/12/19 职场文书
思想政治表现评语
2015/01/04 职场文书
投标承诺函范文
2015/01/21 职场文书
合同纠纷调解书
2015/05/20 职场文书
创业计划书之家政服务
2019/09/18 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
解决Python字典查找报Keyerror的问题
2021/05/26 Python