嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

CitySelect

1、说明

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

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

2、参数

2.1、包含3个参数:

<script>
$('#content').citySelect({
provance: '', /* 默认【省】 可选 */
city: '', /* 默认【市】 可选 */
area: '' /* 默认【县】 可选 */
});
</script>

3、使用

3.1、注意:需在ydui.js前引入数据文件ydui.citys.js

3.1.1、数据文件ydui.citys.js是从京东偷取的数据,点击这里可获取最新数据;

3.2、通过[open]方法打开弹窗;

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

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.citys.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
var $address = $('#J_Address');

$address.citySelect();

$address.on('click', function () {
$address.citySelect('open');
});
</script>

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

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

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.citys.js"></script>
<script src="path/build/js/ydui.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>

3.4、设置初始默认值;

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

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.citys.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
var $address = $('#J_Address');

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

$address.on('click', function () {
$address.citySelect('open');
});
</script>

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。