首页 | 2272 | 499 | 249 | 添加收藏 上一个 下一个
jQuery cityPicker城市模拟原生下拉选择插件

cityPicker


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


版本:1.1.1


功能支持



  • 支持联动

  • 支持搜索功能

  • 支持键盘选择功能


浏览器支持



  • Internet Explorer 7+

  • Chrome for PC

  • Safari for PC

  • Firefox for PC


参数


名称类型默认描述
dataJsonAarray[]城市json数据
selectpatternAarray[{field:"userProvinceId",placeholder:"请选择省份"},{field:"userCityId",placeholder:"请选择城市"},{field:"userDistrictId",placeholder:"请选择区县"}]用于存储的字段名和默认提示
shorthandBooleanflase城市名称简写功能
storageBooleantrue存储的值是数字还是中文
autoSelectedBooleantrue是否自动选择第一项
renderModeBooleantrue是模拟的还是原生的
keyboardBooleanfalse是否开启键盘操作事件
codeBooleanfalse是否输出城市区号值, 开启就是您要传字段名('name')
searchBooleantrue只在模式是selector才生效, 是否开启搜索功能
levelNumber3 多少列默认是一列/级 (3)
onInitializedAttachablefunction(){}组件初始化后触发的回调函数
onClickBeforeAttachablefunction(){}组件点击显示列表触发的回调函数(除原生select)
onForbidAttachablefunction(){}存在class名forbid的禁止点击的回调

使用方法


引入相关文件:


<link rel="stylesheet" type="text/css" href="css/city-picker.css">
<script src="jquery/jquery-1.10.2.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, storage) {
    console.log(storage);
});

方法


setCityVal(val)

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

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