***·需求：***鼠標(biāo)移入切換城市，顯示城市選擇框；鼠標(biāo)移出選擇框，選擇框消失；選擇點(diǎn)擊熱門城市直接修改當(dāng)前位置，點(diǎn)擊省份后自動(dòng)切換到對(duì)應(yīng)的市選擇框。

·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">請(qǐng)選擇省</div><div class="selectCity">請(qǐng)選擇市</div></div><div class="boxBottom"><!-- 省容器 --><div class="provinceBox"></div><!-- 市容器 --><div class="cityBox"></div></div></div></div></div><span style="margin-left: 20px;">一站式企業(yè)服務(wù)平臺(tái)</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(){ //將改變后的實(shí)際高度重新賦值給outerCityBox$(".outerCityBox").height($(".topCityBox").height()) }) // 點(diǎn)擊熱門城市 $(".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') }) // 渲染省份數(shù)據(jù) var tmpProStr = '' for(var i=0;i<area.length;i++){tmpProStr += "<p><b>" + area[i].name + "</b></p>" } $(".provinceBox").html(tmpProStr) // 點(diǎn)擊省份 $("body").on("click",".provinceBox p b",function(){console.log($(".topCityBox").height())//點(diǎn)擊省份后將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("請(qǐng)選擇市")for (var key=0;key<area.length;key++) {if ($(this).text().trim() == area[key].name) {var tmpCityList = area[key].datavar 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") }) // 點(diǎn)擊市 $("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 () {}}) }

·問(wèn)題
點(diǎn)擊省自動(dòng)切換到市選擇框后，由于市的帶選項(xiàng)較少，所以選擇框高度變小，鼠標(biāo)當(dāng)前位置在選擇框外，選擇框便會(huì)消失；
·解決方法
在選擇框外包一個(gè)div，類名為outerCityBox，并將之前綁定給topCityBox的移入移出事件綁定給outerCityBox，點(diǎn)擊省份時(shí)，將topCityBox的高賦值給outerCityBox，鼠標(biāo)移入市選擇框時(shí)再將topCityBox的高賦值給outerCityBox就可以了。

總結(jié)

以上是生活随笔為你收集整理的Jquery实现城市选择(省市联动)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。