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

最新推荐文章于 2025-03-17 16:51:49 发布

H.zq

最新推荐文章于 2025-03-17 16:51:49 发布

阅读量2.8k

点赞数

文章标签： jquery css js vue

本文链接：https://blog.csdn.net/weixin_44968219/article/details/109180130

版权

本文介绍了一个城市选择器的功能实现及交互优化方案。通过鼠标悬停显示城市选择框，点击热门城市更新当前位置，以及选择省份后自动切换到对应市的过程。解决了因市选择框高度变化导致的选择框消失问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

***·需求：***鼠标移入切换城市，显示城市选择框；鼠标移出选择框，选择框消失；选择点击热门城市直接修改当前位置，点击省份后自动切换到对应的市选择框。
在这里插入图片描述
·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就可以了。