基于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);
}