jqyery城市三级联动插件----cityPicker

cityPicker

cityPicker��主要是用于�PC的城市下拉选择插件，有selector和select两种应用场景模式。

来源 https://github.com/lquan529/cityPicker

版本

• 1.1.4

功能支持

• 支持联动
• 支持搜索功能
• 支持键盘选择功能

浏览器�支持

• Internet Explorer 7+
• Chrome for PC
• Safari for PC
• Firefox for PC

参数

名称	类型	默认	描述
dataJson	Aarray	[]	城市json数据
selectpattern	Aarray	[{field:"userProvinceId",placeholder:"请选择省份"},{field:"userCityId",placeholder:"请选择城市"},{field:"userDistrictId",placeholder:"请选择区县"}]	用于存储的字段名和默认提示
�shorthand	Boolean	flase	城市名称简写功能
storage	Boolean	true	存储的值是数字还是中文
autoSelected	Boolean	true	是否自动选择第一项
renderMode	Boolean	true	是模拟的还是原生的
keyboard	Boolean	false	是否开启键盘操作事件
code	Boolean	false	是否输出城市区号值, 开启就是您要传字段名('name')
search	Boolean	true	只在模式是selector才生效, 是否开启搜索功能
level	Number	3	多少列 默认是一列/级 (3)
onInitialized	Attachable	function(){}	组件初始化后触发的回调函数
onClickBefore	Attachable	function(){}	组件点击显示列表触发的回调函数(除原生select)
onForbid	Attachable	function(){}	存在class名forbid的只读点击的回调(状态为readonly)

使用方法

引入相关文件：

<link rel="stylesheet" type="text/css" href="css/city-picker.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/cityPicker-1.0.0.js"></script>

HTML

Dom的级列表都是用js动态生成，页面写Dom的时候只要一个class或者ID来调用插件就可以了

<div class="city-picker-selector" id="city-picker-selector">
    <div class="selector-item storey province">
        <a href="javascript:;" class="selector-name reveal">北京市</a>
        <input type="hidden" name="userProvinceId" class="input-price val-error" value="110000" data-required="userProvinceId">
        <div class="selector-list listing hide">
            <ul>
                <li>北京市</li>
                <li>天津市</li>
                <li>河北省</li>
                <li>山西省</li>
            </ul>
        </div>
    </div>
    <div class="selector-item storey city">
        <a href="javascript:;" class="selector-name reveal">北京市</a>
        <input type="hidden" name="userCityId" class="input-price val-error" value="110100" data-required="userCityId">
        <div class="selector-list listing hide">
            <ul>
                <li>北京市</li>
            </ul>
        </div>
    </div>
    <div class="selector-item storey district">
        <a href="javascript:;" class="selector-name reveal">海淀区</a>
        <input type="hidden" name="userDistrictId" class="input-price val-error" value="110108" data-required="userDistrictId">
        <div class="selector-list listing hide">
            <ul>
                <li>东城区</li>
                <li>西城区</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

模拟城市-无联动/无搜索/键盘操作

var selector = $('#city-picker-selector').cityPicker({
    dataJson: cityData,
    renderMode: true,
    search: false,
    autoSelected: false,
    keyboard: true
});

模拟城市-联动/搜索

$('#city-picker-search').cityPicker({
    dataJson: cityData,
    renderMode: true,
    search: true,
    autoSelected: true
});

原生城市-无联动

var select = $('.city-picker-select').cityPicker({
    dataJson: cityData,
    renderMode: false,
    autoSelected: false
});

事件

cityPick不同级列表选择后的监听事件。choose-xxx监听xxx�不同列表的name

// 省份选择的回调
$('#city-picker-selector').on('choose-province.citypicker', function(event, tagert, values) {
    console.log(values);
});

// 城市选择的回调
$('#city-picker-selector').on('choose-city.citypicker', function(event, tagert, values) {
    console.log(values);
});

// 城市选择的回调
$('#city-picker-selector').on('choose-district.citypicker', function(event, tagert, values) {
    console.log(values);
});

方法

setCityVal(val)

参数	类型	描述
val	Array	默认赋值�显示的城市数据

var selector = $('#city-picker-selector').cityPicker();
    selector.setCityVal([{
        'id': '110000',
        'name': '北京市'
    }, {
        'id': '110100',
        'name': '北京市'
    }, {
        'id': '110108',
        'name': '海淀区'
    }]);

获取值

getCityVal()

�状态

changeStatus(status)

参数	类型	描述
status	String	参数readonly或者disabled

注意：原生select是没有readonly的，如果设置这个是不起作用

绑定

bindEvent()

销毁

unBindEvent()

Demo