沉浸式阅读
Beta

jquery.ajax实现DESTOON出发地与目的地地址三级联动伪下拉菜单式demo

     订阅 网页特效     2016-02-14     网络    小黑    2702    0    0    0    
学习要点:分享此插件的升级版,可用来实现出发地与目的地功能。配图:一、插件新增优点单页面内无限重复使用,可以添加若干个出发地与目的地功能,js源码不变!看官是不是已经迫不及待了?不急不急,咱们一点点来完成案例。二、插件使用教程2.1 html源码部分html源码 h2jquery.ajax实现destoon出发地与目的地地址三级联动伪下拉菜单式demo/h2!--出发地--div class="ylsj-search-areaw z-index10 clearfix"label for=&quo

分享此插件的升级版,可用来实现 出发地与目的地功能。配图:jquery.ajax实现destoon出发地与目的地地址三级联动伪下拉菜单式demo效果图

一、插件新增优点

单页面内无限重复使用,可以添加若干个出发地与目的地功能,js源码不变!

看官是不是已经迫不及待了?不急不急,咱们一点点来完成案例。

二、插件使用教程

2.1 html源码部分

html源码

  1. <h2>jquery.ajax实现destoon出发地与目的地地址三级联动伪下拉菜单式demo</h2>
  2. <!--出发地-->
  3. <div class="ylsj-search-areaw z-index10 clearfix">
  4. <label for="" class="ylsj-SA-lab">出发地:</label>
  5. <ul class="ylsj-select-areaw" data-id="0">
  6. <li class="ylsj-SA-list">
  7. <div class="ylsj-SA-div z-index10">
  8. <span class="ylsj-SA-inp ylsj-SA-city_0">请选择省份</span>
  9. <s class="arrows arrows_t"></s>
  10. <div class="ylsj-SA-city">
  11. <!--待加载省份-->
  12. </div>
  13. </div>
  14. </li>
  15. <li class="ylsj-SA-list">
  16. <div class="ylsj-SA-div z-index9">
  17. <span class="ylsj-SA-inp ylsj-SA-city_1">请选择城市</span>
  18. <s class="arrows arrows_t"></s>
  19. <div class="ylsj-SA-city">
  20. <!--待加载城市-->
  21. </div>
  22. </div>
  23. </li>
  24. <li class="ylsj-SA-list">
  25. <div class="ylsj-SA-div z-index8">
  26. <span class="ylsj-SA-inp ylsj-SA-city_2">请选择县</span>
  27. <s class="arrows arrows_t"></s>
  28. <div class="ylsj-SA-city">
  29. <!--待加载县/乡-->
  30. </div>
  31. </div>
  32. </li>
  33. </ul>
  34. </div>
  35. <!--目的地-->
  36. <div class="ylsj-search-areaw z-index9 clearfix">
  37. <label for="" class="ylsj-SA-lab">目的地:</label>
  38. <ul class="ylsj-select-areaw" data-id="1">
  39. <li class="ylsj-SA-list">
  40. <div class="ylsj-SA-div z-index10">
  41. <span class="ylsj-SA-inp ylsj-SA-city_0">请选择省份</span>
  42. <s class="arrows arrows_t"></s>
  43. <div class="ylsj-SA-city">
  44. <!--待加载省份-->
  45. </div>
  46. </div>
  47. </li>
  48. <li class="ylsj-SA-list">
  49. <div class="ylsj-SA-div z-index9">
  50. <span class="ylsj-SA-inp ylsj-SA-city_1">请选择城市</span>
  51. <s class="arrows arrows_t"></s>
  52. <div class="ylsj-SA-city">
  53. <!--待加载城市-->
  54. </div>
  55. </div>
  56. </li>
  57. <li class="ylsj-SA-list">
  58. <div class="ylsj-SA-div z-index8">
  59. <span class="ylsj-SA-inp ylsj-SA-city_2">请选择县</span>
  60. <s class="arrows arrows_t"></s>
  61. <div class="ylsj-SA-city">
  62. <!--待加载县/乡-->
  63. </div>
  64. </div>
  65. </li>
  66. </ul>
  67. </div>

注意上面代码中黄色高亮部位,这里用数字来区分地区的个数,数字不能重复!目前只有一组出发地和目的地,所以可以用数字0表示出发地,数字1表示目的地。如果想再增加一级出发地与目的地,此时第二级的出发地可用3表示,目的地可用4表示,以此类推。

2.2 css样式

css样式

  1. *{margin:0;padding:0}
  2. .clearfix{*zoom:1}
  3. .clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
  4. ul{list-style:none}
  5. h2{margin:30px auto;text-align:center}
  6. h3{margin:10px auto}
  7. .ylsj-search-areaw{position:relative;width:990px;margin:10px auto}
  8. .ylsj-site,.ylsj-aid{height:35px;line-height:35px;display:inline-block;width:450px;margin:0 auto;max-width:550px;cursor:pointer;border:1px solid #E2E2E2}
  9. .ylsj-cityw{}
  10. .ylsj-SA-list{height:40px;margin-bottom:10px;float:left}
  11. .ylsj-SA-lab{float:left;width:80px;text-align:right;line-height:40px}
  12. .ylsj-SA-div{width:160px;float:left;position:relative;border:1px solid #ccc;border-radius:3px;margin-right:10px}
  13. .ylsj-SA-inp{line-height:36px;height:36px;width:100%;border:none;outline:none;padding:0;text-align:center;display:inline-block}
  14. .ylsj-SA-city{position:absolute;top:100%;left:0;width:99.5%;overflow-y:scroll;_height:330px;max-height:330px;display:none;background:#fff;border:1px solid #ccc}
  15. .ylsj-SAC-span{height:30px;line-height:30px;display:block;padding-left:3px;cursor:pointer;overflow:hidden}
  16. .ylsj-SA-city .on{background:#86A0FF;color:#fff}
  17. .z-index10{z-index:10;position:relative}
  18. .z-index9{z-index:9;position:relative}
  19. .z-index8{z-index:8;position:relative}
  20. pre{width:900px;margin:30px auto}
  21. .arrows{position:absolute;width:0;display:inline-block;font-size:0;height:0;line-height:0;border-width:6px;top:50%;margin-top:-2px}
  22. .arrows_t{border-color:#666 transparent transparent;border-style:solid dashed dashed;right:10px}

2.3 引入jquery文件

引入jquery文件

  1. <!--引入jquery库,版本号为:1.8.3。 如果看官的页面中已引入此库或者是高于此版本的库,可略过。-->
  2. <script type="text/javascript" src="https://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  3. <!--引入获取地址的yilingsj-area-select-more.js,注意修改路径!-->
  4. <script type="text/javascript" src="../ajax_area_select_more/yilingsj-area-select-more.js" ></script>

2.4 资源打包下载

资源下载

  1. demojquery.ajax实现destoon出发地与目的地地址三级联动伪下拉菜单式demo.zip 积分下载 不喜勿下

三、压缩包文件说明

如果看官需要此demo,可使用积分下载。下载解压后如图:更改目录时要修改yilingsj-area-select-more.js中的php路径由于艺灵的案例都放一个文件夹ajax_area_select下,如果看官想将文件放不同的文件夹中,一定要修改yilingsj-area-select-more.js中的ajax路径!否则会出现路径不对错误,然后就是不能成功调用php文件中的信息,然后就看不到效果了......

下载文件的看官,如果不会操作,可在评论区中留下足迹。艺灵看到后会一对一帮您解决问题。

本文标题: jquery.ajax实现DESTOON出发地与目的地地址三级联动伪下拉菜单式demo

本文链接: https://www.mbkfw.com/course/270.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈