相关css引入
<!--选择滚动弹窗样式-->
<link rel="stylesheet" type="text/css" href="./css/mobiscroll-2.13.2.full.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery-weui.min.css" />
相关js引入
<!--选择省/市/区-->
<script src="./js/city-picker.min.js"></script>
<!--选择滚动弹窗-->
<script src="./js/mobiscroll-2.13.2.full.min.js"></script>
基础使用
html
<!--选择紧急联系人:父母、子女、配偶、亲戚、朋友、同事-->
<ul class="relationshiplists" id="relationshiplist" style="display: none">
<li data-no="ICBC">父母</li>
<li data-no="BOC">子女</li>
<li data-no="COMM">配偶</li>
<li data-no="CIB">亲戚</li>
<li data-no="CITIC">朋友</li>
<li data-no="CEB">同事</li>
</ul>
<!-- 遮罩层弹框部分 三级联动-->
<div class="layer"></div>
<li class="selectbank">
<span class="names">现居地</span>
<input id="city-picker" type="text" placeholder="请选择省/市/区"/>
</li>
js
// 点击选择与联系人关系
$("#relationshiplist").mobiscroll().treelist(
{lang:"zh",
defaultValue:[ Math.floor($('marriagelist li').length / 2) ],
cancelText:null,
onSelect:function(valueText) {
console.log(valueText);
var m = $(this).find("li").eq(valueText).html();
//添加到相应位置
$('#relationshipSele').val(m);
console.log(m);
return;
}
})
// 选择省市区时,遮罩显示,银行卡号一栏失去焦点
$('#city-picker').click(function() {
$('input').blur();
$('.layer').show();
})
//.layer插件源码里设置过,点击‘完成’消失。
$(".layer").click(function(){
$('.layer').hide();
});
// 调用省市区三级联动插件
$("#city-picker").cityPicker();
//获取选择的值
var a = $("#city-picker").cityPicker("reset");//现居地
var live_place = a[0].value;
源码更改
$(document).on("click", ".close-picker", function() {
var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
if (pickerToClose.length > 0) {
$.closePicker(pickerToClose);
$('.layer').hide();
}
});