YDUI Touch Docs 返回首页

CitySelect

1、说明

1.1、示例：http://m.ydui.org/html/cityselect.html

1.2、移动端中国省市县级联插件；CitySelect 仅支持Javascript API方式调用；

2、调用

普通调用

需在ydui.js前引入数据文件 ydui.citys.js；

数据文件 ydui.citys.js 是从京东偷取的数据，点击这里可获取最新数据；

通过 [open] 方法打开弹窗；

通过 done.ydui.cityselect 自定义事件获取当前选择的省/市/县。

<input type="text" readonly id="J_Address" placeholder="请选择收货地址">

<script src="//static.ydcss.com/uploads/ydui/ydui.citys.js"></script>
<script>
    var $address = $('#J_Address');

    $address.citySelect();

    $address.on('click', function () {
        $address.citySelect('open');
    });

    $address.on('done.ydui.cityselect', function (ret) {
        /* 省：ret.provance */
        /* 市：ret.city */
        /* 县：ret.area */
        $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
    });
</script>
设置默认地址

设置初始默认值。

<input type="text" readonly id="J_Address2" placeholder="请选择收货地址" value="新疆 乌鲁木齐市 天山区">

<script src="http://static.ydcss.com/uploads/ydui/ydui.citys.js"></script>
<script>
    var $target = $('#J_Address2');

    $target.citySelect({
        provance: '新疆',
        city: '乌鲁木齐市',
        area: '天山区'
    });

    $target.on('click', function () {
        $target.citySelect('open');
    });

    $target.on('done.ydui.cityselect', function (ret) {
        $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
    });
</script>

3、参数

参数说明类型可选值默认值
provance 默认【省】 String - -
city 默认【市】 String - -
area 默认【县】 String - -