基于jQuery仿去哪儿城市选择代码。这是一款使用的jQuery城市选择特效代码下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div class="lineSearch">

  <ul>

      <li class="thRelative" id="hhDrop00">

        <div class="boxSearch">

          <span class="key_word">

            <b class="size_14">北京</b>

            出发城市

          </span>

          <em class="ico thLeft ico_shBlue"></em>

          <a class="thRight ico btn_search" href="javascript:void(0)"></a>

        </div>

        <div class="search_form_suggest" style="display:none;">

          <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3>

          <dl class="search_hotList">

            <dd class="clr_after">

              <a href="#">北京</a>

              <a href="#">上海</a>

              <a href="#">广州</a>

              <a href="#">成都</a>

              <a href="#">杭州</a>

              <a href="#">南京</a>

              <a href="#">深圳</a>

              <a href="#">济南</a>

              <a href="#">石家庄</a>

              <a href="#">武汉</a>

              <a href="#">郑州</a>

              <a href="#">重庆</a>

              <a href="#">福州</a>

              <a href="#">西安</a>

              <a href="#">长沙</a>

              <a href="#">沈阳</a>

              <a href="#">天津</a>

              <a href="#">哈尔滨</a>

              <a href="#">苏州</a>

              <a href="#">南宁</a>

            </dd>

          </dl>

          <div class="clear"></div>

          <div class="select_city_box" item="dep-search">

            <span>输入出发城市</span>

            <input type="text" class="input_city" item="key">

            <button class="btn" type="button" item="commit"></button>

            <div class="search_city_result" item="result" style="display:;">

              <a href="javascript:void();">广州</a> 没有匹配城市

            </div>

          </div>

          <div class="thLeft thPadT5 tab_select">

            <dl class="clrfix">

              <dt>A-G</dt>

              <dd class="clr_after">

                <a href="#">北京</a>

                <a href="#">长沙</a>

                <a href="#">成都</a>

                <a href="#">重庆</a>

                <a href="#">福州</a>

                <a href="#">广州</a>

                <a href="#">贵阳</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>H-L</dt>

              <dd class="clr_after">

                <a href="#">哈尔滨</a>

                <a href="#">杭州</a>

                <a href="#">合肥</a>

                <a href="#">济南</a>

                <a href="#">昆明</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>M-T</dt>

              <dd class="clr_after">

                <a href="#">南昌</a>

                <a href="#">南京</a>

                <a href="#">南宁</a>

                <a href="#">宁波</a>

                <a href="#">青岛</a>

                <a href="#">三亚</a>

                <a href="#">上海</a>

                <a href="#">沈阳</a>

                <a href="#">深圳</a>

                <a href="#">石家庄</a>

                <a href="#">苏州</a>

                <a href="#">太原</a>

                <a href="#">天津</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>W-Z</dt>

              <dd class="clr_after">

                <a href="#">武汉</a>

                <a href="#">厦门</a>

                <a href="#">西安</a>

                <a href="#">郑州</a>

                <a href="#">中山</a>

              </dd>

            </dl>

          </div>

        </div>

      </li>

      <li class="thRelative" id="hhDrop01">

        <div class="boxSearch">

          <span class="key_word">

            <b class="size_14">广州</b>

            到达城市

          </span>

          <em class="ico thLeft ico_shBlue"></em>

          <a class="thRight ico btn_search" href="javascript:void(0)"></a>

        </div>

        <div class="search_form_suggest" style="display:none;">

          <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3>

          <dl class="search_hotList">

            <dd class="clr_after">

              <a href="#">北京</a>

              <a href="#">上海</a>

              <a href="#">广州</a>

              <a href="#">成都</a>

              <a href="#">杭州</a>

              <a href="#">南京</a>

              <a href="#">深圳</a>

              <a href="#">济南</a>

              <a href="#">石家庄</a>

              <a href="#">武汉</a>

              <a href="#">郑州</a>

              <a href="#">重庆</a>

              <a href="#">福州</a>

              <a href="#">西安</a>

              <a href="#">长沙</a>

              <a href="#">沈阳</a>

              <a href="#">天津</a>

              <a href="#">哈尔滨</a>

              <a href="#">苏州</a>

              <a href="#">南宁</a>

            </dd>

          </dl>

          <div class="clear"></div>

          <div class="select_city_box" item="dep-search">

            <span>输入出发城市</span>

            <input type="text" class="input_city" item="key">

            <button class="btn" type="button" item="commit"></button>

            <div class="search_city_result" item="result" style="display:;"><a href="javascript:void(0);">北京</a> 没有匹配城市</div>

          </div>

          <div class="thLeft thPadT5 tab_select">

            <dl class="clrfix">

              <dt>A-G</dt>

              <dd class="clr_after">

                <a href="#">北京</a>

                <a href="#">长沙</a>

                <a href="#">成都</a>

                <a href="#">重庆</a>

                <a href="#">福州</a>

                <a href="#">广州</a>

                <a href="#">贵阳</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>H-L</dt>

              <dd class="clr_after">

                <a href="#">哈尔滨</a>

                <a href="#">杭州</a>

                <a href="#">合肥</a>

                <a href="#">济南</a>

                <a href="#">昆明</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>M-T</dt>

              <dd class="clr_after">

                <a href="#">南昌</a>

                <a href="#">南京</a>

                <a href="#">南宁</a>

                <a href="#">宁波</a>

                <a href="#">青岛</a>

                <a href="#">三亚</a>

                <a href="#">上海</a>

                <a href="#">沈阳</a>

                <a href="#">深圳</a>

                <a href="#">石家庄</a>

                <a href="#">苏州</a>

                <a href="#">太原</a>

                <a href="#">天津</a>

              </dd>

            </dl>

            <dl class="clrfix">

              <dt>W-Z</dt>

              <dd class="clr_after">

                <a href="#">武汉</a>

                <a href="#">厦门</a>

                <a href="#">西安</a>

                <a href="#">郑州</a>

                <a href="#">中山</a>

              </dd>

            </dl>

          </div>

        </div>

      </li>

      <li>

        <div class="thRelative lineSearchbg">

          <em class="thLeft ico ico_serGray"></em>

          <input class="thLeft" name="textfield2" type="text" id="arriveSearchText" value="请输入目的地、主题或关键词" />

          <a class="ico btn_close thLeft" item="close" style="margin:8px 8px 0 0;" id="btn_delete" >删除</a>

          <a class="ico btn_search" item="commit" href="javascript:void(0)">搜&nbsp;&nbsp;索</a>

        </div>

      </li>

  </ul>

</div>

<div style="text-align:center;clear:both">

</div>

via：http://www.w2bc.com/Article/44350

基于jQuery仿去哪儿城市选择代码的更多相关文章

  1. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  2. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  3. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  6. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  7. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  8. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  9. 仿51job.com城市选择框特效

    650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...

随机推荐

  1. Android如何实现TCP和UDP传输

    TCP和UDP在网络传输中非常重要,在Android开发中同样重要. 首先我们来看一下什么是TCP和UDP. 什么是TCP? TCP:Transmission Control Protocol 传输控 ...

  2. MVC几种找不到资源的解决方式

    在MVC中,controller中的Action和View中的.cshtml文件名称有一个对应的关系. 当不对应时,有以下几种情况发生: 一.找不到视图的错误 请求URL:http://localho ...

  3. 【Oracle】Oracle约束的总结

    你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...

  4. 安装Tomcat的Apr

    转:http://www.cnblogs.com/littlehb/archive/2013/04/02/2994785.html 安装Tomcat的Apr,提升性能 发现 Tomcat 可以用 Ap ...

  5. 代码管理（五）git 删除分支

    1.删除远程分支 在远程下面,选择需要删除的分支,右击,选择删除 2.  删除不存在远程对应分支的本地分支 在远程上建立了一个分支feature,后来leader觉得不合理,就把远程feature分支 ...

  6. 获取*.jks签名的方法(Android studio)

  7. Java Nashorn--Part 1

    伴随 Java 8 的发布,Oracle 也一同发布了 Nashorn,它是在 Java 虚拟机上运行 Javascript 语言的一个引擎.Nashorn 的设计是为了替换最初的运行在 JVM 上的 ...

  8. .net framework多个版本在IIS服务器上时应注意-重新注册IIS-错误Server Application Unavailable

    今天客户一个附件上传的应用程序报错,服务器安装了.net 4.0 framework(还有1.0和2.0版本),因为有网站程序需要用到2.0,配置好站点后,附件程序是用的2.0,Mail程序选择版本为 ...

  9. MapReduce中，new Text()引发的写入HDFS的输出文件多一列的问题

    前段时间业务系统有个模块数据没有了,在排查问题的时候发现中间处理环节出错了,错误日志为文件格式不正确,将数据导出后发现这个处理逻辑的输入文件中每一行都多了一列,而且是一个空列(列分隔符是\t).第一次 ...

  10. struts2：多模块多配置文件开发

    struts2支持多模块多配置文件开发.下面是一个仅包含两个模块的示范程序,包括财务.仓库模块.它们都有一个“caiwu“的Action,在各自的命名空间下:还有一个从财务转向到仓库的Action. ...