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


  • :
  • 01-27 14:52
  • :
  • 401次
  • :
  • 0条
  • 4赞

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

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

链接: https://pan.baidu.com/s/19qjWYmxW0hVQEaF-z3IuRA 密码: uert

插件里只有两个js文件,
city.min.js里存放的是全国省市区的具体信息内容;

jquery.citysselect.js里是插件的具体的联动操作代码;


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

第一步:引入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城市联动插件在线演示



您正在找的文章可能是: