zoukankan      html  css  js  c++  java
  • 滚动“自定义”选取,及“省市县”三级联动选取的实现

    相关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();
            }
          });
  • 相关阅读:
    应用机器学习建议
    梯度下降法解神经网络
    梯度下降法解逻辑斯蒂回归
    线性代数学习笔记(十四)
    线性代数学习笔记(十三)
    线性代数学习笔记(十二)
    线性代数学习笔记(十一)
    线性代数学习笔记(十)
    线性代数学习笔记(九)
    重新编译Unity Mono遇到的坑,大坑,巨坑!!!
  • 原文地址:https://www.cnblogs.com/missme-lina/p/11078158.html
Copyright © 2011-2022 走看看