基於weui的城市選擇器（city-picker）
前言
最近在用weui做一個移動端的項目，有個城市選擇器的需求，但是weui原生並不支持，需要自定義實現，查了一些資料，需求完美實現，下面分享下實現過程。
效果
先看下最終的效果：
代碼
html
話不多說，先放html頁面：
<div class="weui-form">
<div class="weui-form__text-area">
<h2 class="weui-form__title">城市選擇器示例</h2>
</div>
<div id="apply-form" class="weui-form__control-area" style="margin: 20px 0;">
<div style="margin-left: 15px; margin-bottom: 10px; overflow: hidden;">
<span style="display: block; width: 5px; height: 25px; background: #10aeff; float: left; margin-right: 10px; border-radius: 2px;"></span>
<span style="float: left;">城市信息</span>
</div>
<div class="weui-cells__title">請認真填寫以下信息</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker1">
<div class="weui-cell__hd"><label class="weui-label">省份1級<spsn style="color: red; float: left; margin-right: 5px;">*</spsn></label></div>
<div class="weui-cell__bd weui-flex"><label id="city1-label"
style="color: #ccc;">請選擇省份</label>
<input id="city1" type="hidden" tips="請選擇省份">
</div>
<div class="weui-cell__ft"></div>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker2">
<div class="weui-cell__hd"><label class="weui-label">城市2級<spsn style="color: red; float: left; margin-right: 5px;">*</spsn></label></div>
<div class="weui-cell__bd weui-flex"><label id="city2-label"
style="color: #ccc;">請選擇城市</label>
<input id="city2" type="hidden" tips="請選擇城市">
</div>
<div class="weui-cell__ft"></div>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker3">
<div class="weui-cell__hd"><label class="weui-label">城市區縣3級<spsn style="color: red; float: left; margin-right: 5px;">*</spsn></label></div>
<div class="weui-cell__bd weui-flex"><label id="city3-label"
style="color: #ccc;">請選擇城市區縣</label>
<input id="city3" type="hidden" tips="請選擇城市">
</div>
<div class="weui-cell__ft"></div>
</div>
</div>
</div>
<div class="weui-form__opr-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="make-sure">確定</a>
</div>
</div>
js
js代碼：
$(function () {
$('#make-sure').on('click', function () {
var msg = "你選擇的省份編碼是：" + $('#showCityPicker1 #city1').val() +
"\n你選擇的城市編碼是：" + $('#showCityPicker2 #city2').val() +
"\n你選擇的城市區縣編碼是：" + $('#showCityPicker3 #city3').val()
alert();
});
$('#showCityPicker1').on('click', function () {
weui.picker(cityData, {
defaultValue: [110000],
depth: 1,
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
$('#showCityPicker1 #city1-label').html(result[0].label);
$('#showCityPicker1 #city1-label').css("color", "#000");
$('#showCityPicker1 #city1').val(result[0].value);
},
title: '省份'
});
});
$('#showCityPicker2').on('click', function () {
weui.picker(cityData, {
defaultValue: [110000, 110000],
depth: 2,
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
$('#showCityPicker2 #city2-label').html(result[0].label + " - " + result[1].label);
$('#showCityPicker2 #city2-label').css("color", "#000");
$('#showCityPicker2 #city2').val(result[1].value);
},
title: '城市'
});
});
$('#showCityPicker3').on('click', function () {
weui.picker(cityData, {
defaultValue: [110000, 110000, 110101],
depth: 3,
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
$('#showCityPicker3 #city3-label').html(result[0].label + " - " + result[1].label + " - " + result[2].label);
$('#showCityPicker3 #city3-label').css("color", "#000");
$('#showCityPicker3 #city3').val(result[2].value);
},
title: '城市區縣'
});
});
});
其中cityData是我修改的城市信息，大致結構如下：
ar cityData = [{
value: 110000,
label: '北京市',
children: [{
value: 110000,
label: '北京市',
children: [{value: 110101, label: '東城區'}, {value: 110102, label: '西城區'}, {
value: 110105,
label: '朝陽區'
}, {value: 110106, label: '豐台區'}, {value: 110107, label: '石景山區'}, {
value: 110108,
label: '海淀區'
}, {value: 110109, label: '門頭溝區'}, {value: 110111, label: '房山區'}, {
value: 110112,
label: '通州區'
}, {value: 110113, label: '順義區'}, {value: 110114, label: '昌平區'}, {
value: 110115,
label: '大興區'
}, {value: 110116, label: '懷柔區'}, {value: 110117, label: '平谷區'}, {
value: 110118,
label: '密雲區'
}, {value: 110119, label: '延慶區'}]
}]
},{...}
完整代碼請移步github，文末有地址。
結語
這就是個簡單的示例，有需求的小伙伴自取，githuhub路徑：weui-demo-city-picker。
因為這次的項目也實現了在線簽名的需求，所以后面也會發布在線簽名的相關實現