<!-- 只需要引入该模块 --> <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); }