• 基于jq+layui 编写省/市/区三级联动组件


    <!-- 只需要引入该模块 -->
    <div class="layui-form">
       <div class="layui-form-item" id="select">
         <div class="layui-inline layui-form-select">
            <label class="layui-form-label">地区选择:</label>
            <div class="layui-input-inline">
               <input type="text" name="areaName" id="areaName" class="layui-input" readonly="readonly" unselectable='on' placeholder="请选择">
               <i class="layui-edge" id="selectIcon"></i>
               <input type="hidden" name="pcode" id="pcode" class="layui-input" value="">
           </div>
        </div>
       </div>
    </div>
     
     // 初始化引用css
     $("head").append("<link>");
     var toolbarCss = $("head").children(":last");
     toolbarCss.attr({
         rel: "stylesheet",
         type: "text/css",
         href:  "citySelect.css"
     }); 
     
     // 动态添加 areaSelect下拉框
     var areaStr = '<div class="area">'+
                    '<ul id="province" class="area-list"></ul>'+
                    '<ul id="city" class="area-list"></ul>'+
                    '<ul id="area" class="area-list"></ul>'+
             '</div>' ;
     $('#select').append(areaStr);
     
        //初始化调用
        function initFun() {
            var areaCode = $('#pcode').val();
            var codeList = areaCode.split('/');
            if (codeList.length == 3) {
                getArea('province', '-1');
                $('#province').fadeIn(200);
                getArea('city', codeList[0]);
                $('#city').fadeIn(200);
                getArea('area', codeList[1]);
                $('#area').fadeIn(200);
                setTimeout(function() {
                    showActive('province', codeList[0]);
                    showActive('city', codeList[1]);
                    showActive('area', codeList[2]);
                }, 200)
            } else {
                getArea('province', '-1');
            }
        }
        
        // 回显接口判断active状态
        function showActive(obj, pcode) {
            $('#' + obj).find('li').each(function(index, item) {
                if ($(item).attr('pcode') == pcode) {
                    $(item).addClass("active");
                    $('#' + obj).scrollTop((index - 2) * 38);
                }
            })
        }
    
        //省级区域点击事件
        $('body').on('click', '#province li', function() {
            $(this).addClass('active').siblings().removeClass('active')
            $('#city').fadeIn(200);
            $('#area').hide();
            var pcode = $(this).attr('pcode');
            // 获取城市区域列表
            getArea('city', pcode);
        })
    
        //市级区域点击事件
        $('body').on('click', '#city li', function() {
            $(this).addClass('active').siblings().removeClass('active')
            $('#area').fadeIn(200);
            var pcode = $(this).attr('pcode');
            // 获取区/县区域列表
            getArea('area', pcode);
        })
    
        // 区县/区域点击
        $('body').on('click', '#area li', function() {
            $(this).addClass('active').siblings().removeClass('active');
            $('.area').slideUp(300);
            // 区域名字
            var selectName = selectArea('province') + '/' + selectArea('city') + '/' + selectArea('area');
            // 区域标识
            var areaCode = selectCode('province') + '/' + selectCode('city') + '/' + selectCode('area');
            $('#areaName').val(selectName);
            $('#pcode').val(areaCode);
            $('#selectIcon').removeClass('layui-edge-open');
        })
    
        // 获取区域名字
        function selectArea(obj) {
            var areaName = $('#' + obj).find('.active').text();
            return areaName;
        }
    
        // 获取区域标识
        function selectCode(obj) {
            var areaCode = $('#' + obj).find('.active').attr('pcode');
            return areaCode;
        }
    
        // 接口获取区域
        function getArea(obj, pcode) {
            $('#' + obj).empty();
            $.get("http://192.168.1.186:8091/sysArea/list", {
                pcode: pcode
            }, function(res) {
                var li = '';
                for (var i = 0; i < res.data.length; i++) {
                    li = '<li pcode="' + res.data[i].areacode + '">' + res.data[i].areaname + '</li>';
                    $('#' + obj).append(li);
                }
            })
        }
    
        // 点击选择框选择区域
        $('#areaName').on("click", function(e) {
            if ($(".area").css("display") == "none") {
                //初始化调用
                initFun();
                $(".area").fadeIn();
                $("#province").fadeIn(200);
                $('#selectIcon').addClass('layui-edge-open');
            } else {
                $('#selectIcon').removeClass('layui-edge-open');
            }
        });
    
        //点击任意区域关闭
        $(document).mousedown(function(e) {
            //只有当某对象存在时才会有的点击任意处出现的事件效果
            if ($(e.target).parents(".area").length == 0) {
                $(".area").fadeOut(); //显示隐藏
                $('#selectIcon').removeClass('layui-edge-open');
            } else {
                return false
            }
        })
    .area {
        position: absolute;
        top: 40px;
        left: 110px;
        height: 252px;
        width: 606px;
        z-index: 1000;
        background-color: #fff;
        display: none;
    }
    
    ul li {
        list-style: none;
    }
    
    .area-list {
        float: left;
        height: 250px;
        width: 200px;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: auto;
        box-shadow: 0 5px 10px #eee;
        display: none;
    }
    
    .area-list li {
        width: 100%;
        color: #48576a;
        height: 36px;
        line-height: 1.5;
        padding: 8px 28px 8px 15px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
    }
    
    .area-list li:hover {
        background-color: rgba(65, 105, 225, .3);
    }
    
    .area-list .active {
        color: #fff !important;
        background-color: #20a0ff !important;
    }
    .area-list:nth-of-type(1) li:after,
    .area-list:nth-of-type(2) li:after{
        content:'';
        width: 0;
        height: 0;
        border-left: 8px solid #bfcbd9;
        border-right: 8px solid transparent;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        position: absolute;
        right: 3px;
        top: 13px;
        display: block;
    }
    
    .layui-form-select .layui-edge-open{
        margin-top: -9px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
  • 相关阅读:
    常用的逻辑控制器。
    map集合迭代。
    [译]如何在.NET Core中使用System.Drawing?
    使用.Net Core 2.1开发Captcha图片验证码服务
    ife 零基础学院 day 2
    ife 零基础学院 day 1
    Visual Studio 2017
    Visual Studio 2017
    在Windows 10上利用seafile搭建个人云服务
    Web网站配置Gzip,压缩js css文件
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/14754055.html
Copyright © 2020-2023  润新知