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();
            }
          });
  • 相关阅读:
    【TS】535- 7个超好用的 TypeScript 新功能
    【学习】一起加入重学 TypeScript 学习小组
    17.5W秒级交易峰值下的混合云弹性架构之路
    微服务架构:spring cloud之服务注册和服务发现
    消息队列服务RabbitMQ 和Kafka对比
    微服务架构:spring cloud简介
    2016 年度码云热门项目排行榜 TOP 10
    Netflix Conductor : 一个微服务的编排器
    Java 9的这一基本功能,你可能从未听过
    使用 Docker 搭建 Java Web 运行环境
  • 原文地址:https://www.cnblogs.com/missme-lina/p/11078158.html
Copyright © 2011-2022 走看看