2. it技术
  3. Jquery实现城市选择(省市联动)

Jquery实现城市选择(省市联动)

it2023-03-07  84

***·需求：***鼠标移入切换城市，显示城市选择框；鼠标移出选择框，选择框消失；选择点击热门城市直接修改当前位置，点击省份后自动切换到对应的市选择框。 ·html

<div class="position"> <div class="positionIcon"> <span class="iconfont icon-dingweiweizhi2" style="font-size: 14px;"></span> <span style="margin-left:2px;" class="currentCity">北京</span> <span style="margin-left: 2px;" class="checkCity">[切换城市]</span> <!-- 选择城市下拉框 --> <div class="outerCityBox"> <div class="topCityBox"> <div class="boxTop"> <p class="hotSearch">热门搜索</p> <div class="hotCity"> <p><b>北京</b></p> <p><b>深圳</b></p> <p><b>上海</b></p> <p><b>广州</b></p> <p><b>重庆</b></p> <p><b>成都</b></p> <p><b>杭州</b></p> <p><b>郑州</b></p> <p><b>武汉</b></p> <p><b>南京</b></p> <p><b>西安</b></p> </div> </div> <!-- 选择省市tab栏 --> <div class="boxMiddle"> <div class="selectProvince inputActive">请选择省</div> <div class="selectCity">请选择市</div> </div> <div class="boxBottom"> <!-- 省容器 --> <div class="provinceBox"> </div> <!-- 市容器 --> <div class="cityBox"> </div> </div> </div> </div> </div> <span style="margin-left: 20px;">一站式企业服务平台</span> </div>

·css

.outerCityBox{ width: 342px; display: none; position: absolute; top: 36px; left: 0px; z-index: 999; } .topCityBox { width: 342px; height: auto; background-color: #fff; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.13) } .hotSearch { font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; padding-left: 10px; padding-top: 10px; } .hotCity { width: 100%; } .hotCity p { display: inline-block; width: 53px; text-align: center; } .hotCity b { padding: 0px 11px; font-weight: 100; display: inline-block; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 18px; margin-top: 13px; cursor: pointer; } .hotCity b:hover { color: #05A4FF; } .topCityBox .active { background-color: #05A4FF; color: #FFFFFF; } .topCityBox .active:hover { color: #FFF; } /* .hotCity b:hover */ .boxMiddle { width: 100%; height: 30px; border-bottom: 1px solid #E9E9E9; position: relative; margin-top: 18px; } .boxMiddle div { text-align: center; height: 30px; font-size: 12px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 400; color: #999999; width: 68px; position: absolute; left: 15px; border: 1px solid #E9E9E9; cursor: pointer; line-height: 30px; } .boxMiddle .selectCity{ width: auto; padding: 0 15px; } .boxMiddle .inputActive { border-bottom: 1px solid #fff!important; } .boxMiddle .selectCity { left: 89px; } .boxMiddle input::-webkit-input-placeholder { font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; } .boxMiddle input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; } .boxMiddle input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; } .boxMiddle input:-ms-input-placeholder { /* Internet Explorer 10-11 */ font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; } .boxBottom { width: 100%; padding-bottom: 15px; } .boxBottom .provinceBox { display: block; } .boxBottom .cityBox { display: none; } .boxBottom b { padding: 0px 11px; font-weight: 100; display: inline-block; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 18px; margin-top: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .boxBottom b:hover { color: #05A4FF; } .boxBottom p { display: inline-block; width: auto; text-align: center; } .provinceBox p{ width: 19%!important; } .boxBottom .active { background-color: #05A4FF; color: #FFFFFF; } .boxBottom .active:hover { color: #FFF; }

·js

$(".checkCity").mouseenter(function () { $(".outerCityBox").css("display", "block") $(".positionIcon").css("background", "#FFF") $(".positionIcon span").css("color", "#05A4FF") console.log($(".topCityBox").height(),'............') }) $(".positionIcon").mouseleave(function () { $(".outerCityBox").css("display", "none") $(".positionIcon").css("background", "none") $(".positionIcon span").css("color", "#FFF") }) $(".cityBox").mouseenter(function(){ //将改变后的实际高度重新赋值给outerCityBox $(".outerCityBox").height($(".topCityBox").height()) }) // 点击热门城市 $(".hotCity p b").click(function () { var province = "" for(var i=0;i<area.length;i++){ for(var j=0;j<area[i].data.length;j++){ if(area[i].data[j].name == $(this).text().trim()){ province = area[i].name } } } updateCity(province,$(this).text().trim()) // $(".currentCity").text($(this).text().trim()) $(this).addClass('active') .parent() .siblings() .find('b') .removeClass('active') $(".boxBottom p b").removeClass('active') }) // 渲染省份数据 var tmpProStr = '' for(var i=0;i<area.length;i++){ tmpProStr += "<p><b>" + area[i].name + "</b></p>" } $(".provinceBox").html(tmpProStr) // 点击省份 $("body").on("click",".provinceBox p b",function(){ console.log($(".topCityBox").height()) //点击省份后将topCityBox的高赋值给outerCityBox $(".outerCityBox").height($(".topCityBox").height()) $(".selectProvince").text($(this).text().trim()) $(this).addClass('active') .parent() .siblings() .find('b') .removeClass('active') $(".hotCity p b").removeClass('active') $(".selectCity").text("请选择市") for (var key=0;key<area.length;key++) { if ($(this).text().trim() == area[key].name) { var tmpCityList = area[key].data var tmpCityStr = '' for (var i = 0; i < tmpCityList.length; i++) { tmpCityStr += "<p><b>" + tmpCityList[i].name + "</b></p>" } $(".cityBox").html(tmpCityStr) } } $(".topCityBox").css("display", "block") $(".cityBox").css("display", "block") $(".provinceBox").css("display", "none") $(".selectCity").addClass("inputActive") $(".selectProvince").removeClass("inputActive") // $(".positionIcon").unbind("mouseleave") }) $(".selectProvince").click(function () { $(".provinceBox").css("display", "block") $(".cityBox").css("display", "none") $(this).addClass("inputActive").siblings().removeClass("inputActive") }) $(".selectCity").click(function () { $(".cityBox").css("display", "block") $(".provinceBox").css("display", "none") $(this).addClass("inputActive").siblings().removeClass("inputActive") }) // 点击市 $("body").on("click", ".cityBox p b", function () { $(".selectCity").text($(this).text().trim()) $(this).addClass('active') .parent() .siblings() .find('b') .removeClass('active') $(".hotCity p b").removeClass('active') updateCity($(".selectProvince").text().trim(),$(this).text().trim()) $(".selectCity").addClass("inputActive") $(".selectProvince").removeClass("inputActive") }) // var userIp = returnCitySN.cip if(window.localStorage.getItem("userCity")){ $(".currentCity").text(window.localStorage.getItem("userCity")) }else{ getCity() } function getCity() { $.ajax({ url: '/api/city/getCity', type: 'post', // data:userIp, contentType: 'application/json', success: function (result) { var res = JSON.parse(result) if (res.code == 200) { var userCity = res.data.city $('.currentCity').text(userCity) window.localStorage.setItem("userCity",userCity) } }, error: function () { } }) } function updateCity(province,city) { var params = { // ip:userIp, province:province, city:city } $.ajax({ url: 'api/city/updateCity', type: 'post', data: JSON.stringify(params), // data:city, contentType: 'application/json', success: function (result) { var res = JSON.parse(result) if (res.code == 200) { var userCity = res.data.city $('.currentCity').text(userCity) window.localStorage.setItem("userCity",userCity) } }, error: function () { } }) }

·问题 点击省自动切换到市选择框后，由于市的带选项较少，所以选择框高度变小，鼠标当前位置在选择框外，选择框便会消失； ·解决方法 在选择框外包一个div，类名为outerCityBox，并将之前绑定给topCityBox的移入移出事件绑定给outerCityBox，点击省份时，将topCityBox的高赋值给outerCityBox，鼠标移入市选择框时再将topCityBox的高赋值给outerCityBox就可以了。

最新回复(0)