建站资源下载详情

为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery省市县自定义联动选择插件city s e l e c t

来源:易助科技网浏览量:7收藏

简介


cityselec是一款JQuery省市县自定义联动选择插件。


JQuery省市县自定义联动选择插件cityselect-示例图


参数属性:


参数名默认值字符类型使用频率释义说明
urljs/city.min.jsstring常用省市数据josn文件路径
provnullstring常用默认省份
citynullstring常用默认城市
distnullboolean常用默认地区(县)
nodatanullstring常用无数据状态
requiredtrueboolean常用必选项



使用


1.  引入 文件


<script type="text/javascript" src="./js/jquery.js"></script>  
<script type="text/javascript" src="./js/jquery.cityselect.js"></script>


2.  HTML


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


3.  调用


<script type="text/javascript">
  $(function(){
    $("#city").citySelect({
      nodata:"none",
      required:false
    });
  });
</script>


也可以自定义省市区:


$("#city").citySelect({   
    url:"city.min.js",   
    prov:"湖南", //省份  
    city:"长沙", //城市  
    dist:"岳麓区", //区县  
    nodata:"none" //当子集无数据时,隐藏select  
});


用JSON数据:


$("#city").citySelect({  
    url:{"citylist":[  
        {"p":"前端课程","c":[{"n":"HTML"},{"n":"CSS3","a":[{"s":"HTML5"},{"s":"AJAX"}]},  
        {"n":"JSON"}]},  
        {"p":"编程语言","c":[{"n":"C"},{"n":"Objective-C"},{"n":"PHP"},{"n":"Python"}]},  
        {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Mssql"}]},  
    ]},  
    prov:"",  
    city:"",  
    dist:"",  
    nodata:"none"  
});



相关链接


GitHub 地址 :  https://github.com/lmxdawn/cityselect