滚动“自定义”选取，及“省市县”三级联动选取的实现

相关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();
        }
      });

转载于:https://www.cnblogs.com/missme-lina/p/11078158.html