ajax js java省市三级联动菜单,jquery.ajax获取destoon省市县地址三级联动下拉菜单式demo...

摘要：

之前分享了一篇用jquery.ajax获取destoon地址库的教程文章，今天艺灵将接着分享此插件。艺灵已将其做成伪下拉菜单式，快来欣赏下吧......

上次艺灵分享了一篇关于调取destoon地址库三级联动的插件--jquery ajax实战之从destoon数据库中调取省市县地址库信息，今天艺灵将继续分享此插件的另一个版本。来张插件截图吧：

话不多说，直接进入主题！

一、插件优点

1.与上次插件一样，任意页面可调用！不再像destoon默认的{ajax_area_select('post[areaid]', '请选择', $areaid, '', 2)}那样有局限性；

2.伪下拉菜单式，比系统默认的下拉菜单更好看一点点，懂代码的看官可自行美化。

3.调用方便，只需要将源码上传到服务器上，引用js文件即可实现效果，无需修改代码。(想美化界面的看官自行美化源码)

废话不多说，直接上demo代码吧！

二、插件使用教程

2.1　html源码部分

html源码

jquery.ajax获取destoon省市县地址三级联动下拉菜单式demo

• 省份：

  请选择省份

• 城市：

  请选择城市

• 县：

  请选择县

可能看官还想知道此ajax输出的其它信息(不需要的请无视！)：

地址：省份/城市/县

aid： aid

2.2　css样式

css样式

/*demo外层*/

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

.ylsj-SA-list{height:40px;margin-bottom:10px}

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

.ylsj-SA-div{width:260px;float:left;position:relative;border:1px solid #ccc;border-radius:3px}

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

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

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

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

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

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

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

pre{width:900px;margin:30px auto}

/*箭头*/

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

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

/*预留输出内容*/

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

2.3　引入jquery文件

引入jquery文件

2.4　资源打包下载

资源下载

三、压缩包文件说明

如果看官需要此demo，可使用积分下载。下载解压后如图：

由于艺灵的案例都放一个文件夹ajax_area_select下，如果看官想将文件放不同的文件夹中，一定要修改yilingsj-area-select.js中的ajax路径！否则会出现路径不对错误，然后就是不能成功调用php文件中的信息，然后就看不到效果了......

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

----------完----------

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：http://www.yilingsj.com/jquery/2016-01-22/359.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。