分享好友教程首页教程搜索频道列表
首页>开发者社区>网页特效>正文

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

2016-02-14 12:0933640
+关注32
核心提示：分享此插件的升级版,可用来实现出发地与目的地功能。配图：一、插件新增优点单页面...

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

一、插件新增优点

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

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

二、插件使用教程

2.1　html源码部分

html源码 

    
	
	
  1. 
		<h2>jquery.ajax实现destoon出发地与目的地地址三级联动伪下拉菜单式demo</h2>
	
    2. 

	
  2. 
		<!--出发地-->
	
    3. 

	
  3. 
		<div class="ylsj-search-areaw z-index10 clearfix">
	
    4. 

	
  4. 
		<label for="" class="ylsj-SA-lab">出发地：</label>
	
    5. 

	
  5. 
		<ul class="ylsj-select-areaw" data-id="0">
	
    6. 

	
  6. 
		<li class="ylsj-SA-list">
	
    7. 

	
  7. 
		<div class="ylsj-SA-div z-index10">
	
    8. 

	
  8. 
		<span class="ylsj-SA-inp ylsj-SA-city_0">请选择省份</span>
	
    9. 

	
  9. 
		<s class="arrows arrows_t"></s>
	
    10. 

	
  10. 
		<div class="ylsj-SA-city">
	
    11. 

	
  11. 
		<!--待加载省份-->
	
    12. 

	
  12. 
		</div>
	
    13. 

	
  13. 
		</div>
	
    14. 

	
  14. 
		</li>
	
    15. 

	
  15. 
		<li class="ylsj-SA-list">
	
    16. 

	
  16. 
		<div class="ylsj-SA-div z-index9">
	
    17. 

	
  17. 
		<span class="ylsj-SA-inp ylsj-SA-city_1">请选择城市</span>
	
    18. 

	
  18. 
		<s class="arrows arrows_t"></s>
	
    19. 

	
  19. 
		<div class="ylsj-SA-city">
	
    20. 

	
  20. 
		<!--待加载城市-->
	
    21. 

	
  21. 
		</div>
	
    22. 

	
  22. 
		</div>
	
    23. 

	
  23. 
		</li>
	
    24. 

	
  24. 
		<li class="ylsj-SA-list">
	
    25. 

	
  25. 
		<div class="ylsj-SA-div z-index8">
	
    26. 

	
  26. 
		<span class="ylsj-SA-inp ylsj-SA-city_2">请选择县</span>
	
    27. 

	
  27. 
		<s class="arrows arrows_t"></s>
	
    28. 

	
  28. 
		<div class="ylsj-SA-city">
	
    29. 

	
  29. 
		<!--待加载县/乡-->
	
    30. 

	
  30. 
		</div>
	
    31. 

	
  31. 
		</div>
	
    32. 

	
  32. 
		</li>
	
    33. 

	
  33. 
		</ul>
	
    34. 

	
  34. 
		</div>
	
    35. 

	
  35. 
		<!--目的地-->
	
    36. 

	
  36. 
		<div class="ylsj-search-areaw z-index9 clearfix">
	
    37. 

	
  37. 
		<label for="" class="ylsj-SA-lab">目的地：</label>
	
    38. 

	
  38. 
		<ul class="ylsj-select-areaw" data-id="1">
	
    39. 

	
  39. 
		<li class="ylsj-SA-list">
	
    40. 

	
  40. 
		<div class="ylsj-SA-div z-index10">
	
    41. 

	
  41. 
		<span class="ylsj-SA-inp ylsj-SA-city_0">请选择省份</span>
	
    42. 

	
  42. 
		<s class="arrows arrows_t"></s>
	
    43. 

	
  43. 
		<div class="ylsj-SA-city">
	
    44. 

	
  44. 
		<!--待加载省份-->
	
    45. 

	
  45. 
		</div>
	
    46. 

	
  46. 
		</div>
	
    47. 

	
  47. 
		</li>
	
    48. 

	
  48. 
		<li class="ylsj-SA-list">
	
    49. 

	
  49. 
		<div class="ylsj-SA-div z-index9">
	
    50. 

	
  50. 
		<span class="ylsj-SA-inp ylsj-SA-city_1">请选择城市</span>
	
    51. 

	
  51. 
		<s class="arrows arrows_t"></s>
	
    52. 

	
  52. 
		<div class="ylsj-SA-city">
	
    53. 

	
  53. 
		<!--待加载城市-->
	
    54. 

	
  54. 
		</div>
	
    55. 

	
  55. 
		</div>
	
    56. 

	
  56. 
		</li>
	
    57. 

	
  57. 
		<li class="ylsj-SA-list">
	
    58. 

	
  58. 
		<div class="ylsj-SA-div z-index8">
	
    59. 

	
  59. 
		<span class="ylsj-SA-inp ylsj-SA-city_2">请选择县</span>
	
    60. 

	
  60. 
		<s class="arrows arrows_t"></s>
	
    61. 

	
  61. 
		<div class="ylsj-SA-city">
	
    62. 

	
  62. 
		<!--待加载县/乡-->
	
    63. 

	
  63. 
		</div>
	
    64. 

	
  64. 
		</div>
	
    65. 

	
  65. 
		</li>
	
    66. 

	
  66. 
		</ul>
	
    67. 

	
  67. 
		</div>
	
    68.

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

2.2　css样式

css样式 

    
	
	
  1. 
		
	
    2. 

	
  2. 
		*{margin:0;padding:0}
	
    3. 

	
  3. 
		.clearfix{*zoom:1}
	
    4. 

	
  4. 
		.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
	
    5. 

	
  5. 
		ul{list-style:none}
	
    6. 

	
  6. 
		h2{margin:30px auto;text-align:center}
	
    7. 

	
  7. 
		h3{margin:10px auto}
	
    8. 

	
  8. 
		.ylsj-search-areaw{position:relative;width:990px;margin:10px auto}
	
    9. 

	
  9. 
		.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}
	
    10. 

	
  10. 
		.ylsj-cityw{}
	
    11. 

	
  11. 
		.ylsj-SA-list{height:40px;margin-bottom:10px;float:left}
	
    12. 

	
  12. 
		.ylsj-SA-lab{float:left;width:80px;text-align:right;line-height:40px}
	
    13. 

	
  13. 
		.ylsj-SA-div{width:160px;float:left;position:relative;border:1px solid #ccc;border-radius:3px;margin-right:10px}
	
    14. 

	
  14. 
		.ylsj-SA-inp{line-height:36px;height:36px;width:100%;border:none;outline:none;padding:0;text-align:center;display:inline-block}
	
    15. 

	
  15. 
		.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}
	
    16. 

	
  16. 
		.ylsj-SAC-span{height:30px;line-height:30px;display:block;padding-left:3px;cursor:pointer;overflow:hidden}
	
    17. 

	
  17. 
		.ylsj-SA-city .on{background:#86A0FF;color:#fff}
	
    18. 

	
  18. 
		.z-index10{z-index:10;position:relative}
	
    19. 

	
  19. 
		.z-index9{z-index:9;position:relative}
	
    20. 

	
  20. 
		.z-index8{z-index:8;position:relative}
	
    21. 

	
  21. 
		pre{width:900px;margin:30px auto}
	
    22. 

	
  22. 
		
	
    23. 

	
  23. 
		.arrows{position:absolute;width:0;display:inline-block;font-size:0;height:0;line-height:0;border-width:6px;top:50%;margin-top:-2px}
	
    24. 

	
  24. 
		.arrows_t{border-color:#666 transparent transparent;border-style:solid dashed dashed;right:10px}
	
    25.

2.3　引入jquery文件

引入jquery文件 

    
	
	
  1. 
		<!--引入jquery库，版本号为:1.8.3。 如果看官的页面中已引入此库或者是高于此版本的库，可略过。-->
	
    2. 

	
  2. 
		<script type="text/javascript" src="https://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
	
    3. 

	
  3. 
		<!--引入获取地址的yilingsj-area-select-more.js，注意修改路径！-->
	
    4. 

	
  4. 
		<script type="text/javascript" src="../ajax_area_select_more/yilingsj-area-select-more.js" ></script>
	
    5.

2.4　资源打包下载

资源下载 

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

三、压缩包文件说明

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

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

整理员：小黑
免责声明：凡注明来源本网的所有作品，均为本网合法拥有版权或有权使用的作品，欢迎转载，注明出处。非本网作品均来自互联网，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列，当外层宽度不足时，会自动提示超出的数量，这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果，有没有发现在现如今的网站应用中，我们大量的使用到这类场景,在解决这类问题时，我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发