jquery.cityselect省市区三级联动插件的使用方法及实例亲测 收藏

文章标签: 帮助手册 使用实例
  • :
  • 07-02 20:30
  • :
  • 176次
  • :
  • 0条
  • 2赞

简介jquery.cityselect插件的具体使用方法和在线实例演示。l

jquery.cityselect是一款非常有用的省市区三级下拉联动插件,有需要的朋友可以点下面的链接直接下载:

jquery.cityselect省市区三级联动插件下载


本文站长非常具体的和大家说下如何把这个插件引入到自己的网页里:

第一步:引入jquery库和插件JS:

<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" src="/Html/aijquery/inc/jquery.cityselect.js"></script>

插件有两个js文件,只用把jquery.cityselect.js引入就行。


第二步:打开jquery.cityselect.js,找到下面这几句代码,修改“city.min.js”文件存放的具体位置:


上面两步完成后,我们就可以直接使用这个省市区三级联动插件了,下面站长给大家几种常用的使用方法,并且在文章的最后,还有完整的在线实例演示:

1.二级联动,只显示省和市:

<div id="city_1">
    <select class="prov"></select>
    <select class="city" disabled="disabled"></select>
</div>

<script language="javascript">
$("#city_1").citySelect({
    nodata:"none",
    required:false //这里如果改为false 则下拉选项里就没有 “请选择”这一项
});
</scritp>


2.三级联动,默认省份:河南,自动隐藏无数据的子级select:

<div id="city_2">    
    <select class="prov"></select>     
    <select class="city" disabled="disabled"></select>    
    <select class="dist" disabled="disabled"></select>  
</div>

<script language="javascript">
$("#city_2").citySelect({  
    prov: "河南",  
    nodata: "none"
});
</scritp>


3.二级联动 设置默认显示的省份、城市:

<div id="city_3">    
    <select class="prov"></select>     
    <select class="city" disabled="disabled"></select>  
</div>

<script language="javascript">
$("#city_3").citySelect({  
    prov: "河南",  
    city: "济源"
});
</scritp>


4.三级联动 设置默认省份、城市、地区(县):

<div id="city_4">    
    <select class="prov"></select>     
    <select class="city" disabled="disabled"></select>    
    <select class="dist" disabled="disabled"></select>  
</div>

<script language="javascript">
$("#city_4").citySelect({    
    prov: "河南",    
    city: "郑州",    
    dist: "二七区",    
    nodata: "none"  
});
</scritp>


下面是完整的在线实例演示:

jquery城市联动插件在线演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-14 14:32:41