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

相关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();
        }
      });
posted @ 2019-06-24 17:09  missme_lina  阅读(735)  评论(0编辑  收藏  举报
喜欢就“全力以赴”,不对盘就“在下告辞”,原则是“可以辛苦,但不能委屈”。