首页 | 6188 | 678 | 339 | 添加收藏 上一个 下一个
jQuery city城市字母分类选择插件

citySelect


citySelect是面向于PC端的一款基于JQuery的、整体功能都比较完善的拼音分类和集成搜索功能的城市选择插件。


Version1.0.2


Support



  • Internet Explorer 8+

  • Chrome for PC

  • Safari for PC

  • Firefox for PC


Integrations



  • 支持拼音、名称模糊搜索功能

  • 可以键盘操作选择

  • 可以单选、多选模式切换

  • 可以修改热门城市


Options


名称类型默认描述
dataJson[Array]默认空城市数据源
convert[Boolean]true(转换)转换数据,引入的数据源是citydata.js就需要转换;引入的是newcitydata.js就不需要
shorthand[Boolean]false(全称)名称的全称、简称
multiSelect[Boolean]false(单选)多选、单选
search[Boolean]true(搜索)开启搜索
multiMaximum[Number]5(最多可选5个城市)最多可选的城市个数(多选)
multiType[Number]0(多行)值允许1或者0;只用于多选,选中的值显示是一行还是多行
placeholder[String]'请选择城市'默认的提示语
searchPlaceholder[String]'输入关键词搜索'搜索文本框默认的提示语
hotCity[Array](取前面18条数据)热门城市显示数据,传就生成热门城市,没有就插件生成
onInit[function]function () {}插件初始化后的回调
onForbid[function]function () {}插件禁止后再点击的回调
onTabsAfter[function]function (target) {}点击tabs切换显示城市后的回调
onTabsForbid[function]function (target) {}tabs禁止后再点击的回调
onCallerAfter[function]function (target, values) {}选择城市后的回调

使用方法


<link rel="stylesheet" type="text/css" href="css/city-select.css">

CSS


<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<script type="text/javascript" src="js/citydata.js"></script>
<script type="text/javascript" src="js/citySelect-1.0.0.js"></script>

Basic usage


classcity-select 是必要的,不能把它去掉


单选


HTML


<div class="city-select" id="single-select-1"></div>

Javascript


var singleSelect1 = $('#single-select-1').citySelect({
    dataJson: cityData, //数据源
    multiSelect: false, //单选
    shorthand: true, //简称
    search: true, //搜索
    onInit: function() { //初始化回调
        console.log(this)
    },
    onTabsAfter: function(target) { //切换tab回调
        console.log(target)
    },
    onCallerAfter: function(target, values) { //选择后回调
        console.log(JSON.stringify(values))
    }
});

单选设置默认城市


singleSelect1.setCityVal('北京市');

多选


HTML


<div class="city-select" id="multi-select-1"></div>

Javascript


var MulticitySelect1 = $('#multi-select-1').citySelect({
    dataJson: cityData, //数据源
    multiSelect: true, //多选
    multiMaximum: 6, //可以选择的个数
    search: false, //关闭搜索
    onInit: function() { //初始化回调
        console.log(this)
    },
    onForbid: function() { //禁止后点击的回调
        console.log(this)
    },
    onTabsAfter: function(target) { //切换tab回调
        console.log(event)
    },
    onCallerAfter: function(target, values) { //选择后回调
        console.log(JSON.stringify(values))
    }
});

多选设置城市接口


MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');