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

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

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

一、插件优点

1.与上次插件一样,任意页面可调用!不再像destoon默认的{ajax_area_selec('post[areaid]', '请选择', $areaid, '', 2)}那样有局限性;
2.伪下拉菜单式,比系统默认的下拉菜单更好看一点点,懂代码的看官可自行美化。
3.调用方便,只需要将源码上传到服务器上,引用js文件即可实现效果,无需修改代码。(想美化界面的看官自行美化源码)

废话不多说,直接上demo代码吧!

二、插件使用教程

2.1 html源码部分

html源码

<h2>jquery.ajax获取destoon省市县地址三级联动下拉菜单式demo</h2>
<ul class=”ylsj-selec-areaw”>
<li class=”ylsj-SA-list”>
<label for=”” class=”ylsj-SA-lab”>省份:</label>
<div class=”ylsj-SA-div z-index10″>
<span class=”ylsj-SA-inp ylsj-SA-city_0″>请选择省份</span>
<s class=”arrows arrows_t”></s>
<div class=”ylsj-SA-city”>
<!–待加载省份–>
</div>
</div>
</li>
<li class=”ylsj-SA-list”>
<label for=”” class=”ylsj-SA-lab”>城市:</label>
<div class=”ylsj-SA-div z-index9″>
<span class=”ylsj-SA-inp ylsj-SA-city_1″>请选择城市</span>
<s class=”arrows arrows_t”></s>
<div class=”ylsj-SA-city”>
<!–待加载城市–>
</div>
</div>
</li>
<li class=”ylsj-SA-list”>
<label for=”” class=”ylsj-SA-lab”>县:</label>
<div class=”ylsj-SA-div z-index8″>
<span class=”ylsj-SA-inp ylsj-SA-city_2″>请选择县</span>
<s class=”arrows arrows_t”></s>
<div class=”ylsj-SA-city”>
<!–待加载县/乡–>
</div>
</div>
</li>
</ul>
<pre>
<h3>可能看官还想知道此ajax输出的其它信息(不需要的请无视!):<br /></h3>
<p>地址:<span class=”ylsj-site” >省份/城市/县</span></p>
<p>aid: <span class=”ylsj-aid” >aid</span></p>
</pre>

2.2 css样式

css样式

.ylsj-selec-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 #E2E2E

2.3 引入jquery文件

引入jquery文件

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

 

三、压缩包文件说明

如果看官需要此demo,下载解压后如图:

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

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

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.dtmb.wang",如遇到无法解压的请联系管理员!
尚艺源码网 » jquery.ajax获取destoon省市县地址三级联动下拉菜单式demo

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,网站上免费模板仅供交流和学习使用,安全问题需自行测试后使用。付费模板属于原创模板经过测试请放心使用。这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。