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

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

·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].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")
})
// 点击市
$("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就可以了。

Jquery实现城市选择(省市联动)相关推荐

js+php做省份城市选择,三级联动,前后端简单交互,最详细
需要先安装xampp,,免费的软件,然后运行apache,我安装的英文版没有红色或×或者报错,就能正常运行,如果软件有报错问题,可以网上搜索相关解决方案,都有. 文件我写了四个,一个html,三个p ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
php商城手机端省市显示,jQuery仿手机京东商城收货地址城市选择
jQuery仿手机京东商城收货地址城市选择 js代码 /** * 默认调用 */ !function () { var $target = $('#J_Address'); $target.cityS ...
jQuery省市联动
用jQuery实现省市联动 <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件一.总结一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
jQuery世界国家城市选择插件
下载地址这款jQuery国家选择插件样式挺好看,世界国家城市多级联动选择功能很强大,不仅支持全世界各个国家城市的多级联动,而且每一级都支持关键词搜索,可以快速定位需要选择的国家和城市. dd:
【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）
本文只要是通过使用JQuery实现城市(省.市.县)两级或三级联动,并使用下拉菜单展现.主要的代码如下: 1.在Controller中的代码: @RequestMapping(value=" ...
JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(六十二) jQuery jQuery遍历传统遍历 jQuery对象遍历 jQuery全局函 ...
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: www.jb51.net jQuery城市选择框 #parent{ width:500px; po ...

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

Jquery实现城市选择(省市联动)相关推荐

最新文章

热门文章