HTML:
<div>
<div>地市/站点:</div>
<div id="search" class="node">
//搜索框
<div class="citySelect">
<span class="cityName"></span>
<div class="iconfont delectText">

</div>
</div>
//选择的框
<div class="dropDown" style="position:relative;z-index:11;display: none;">
<div class="dropProv">
<ul class="dropProvUl dropUl">
</ul>
</div>
<div class="dropCity" style="display: none;">
<ul class="dropCityUl dropUl"></ul>
</div>
</div>
</div>
</div>
JS:
$(function () {
//获取城市的接口方法
getUnitTree()
if ($('.cityName').val() == '') {
$('.delectText').css('display', 'none')
}
//点击选{择城市时,先隐藏省级市级选择块
$('.citySelect').on('click', function () {
$('.dropCity').css('display', "none");
$('.dropDown').toggle();
// getUnitTree()dropProv
//点击省份时,选择省会城市
$('.dropProvLi').off("click").on('click', function () {
cityName = $(this).context.innerText
unId = $(this).attr('id')
aId = ''
$(this).addClass('cityActive').siblings().removeClass('cityActive')
$('.dropCity').css('display', 'block')
if (unId != '') {
//通过城市里面的点击获取的id来获取县级或区
getSite(unId)
} else {
getSite(unitID)
}
$('.cityName').text(cityName);
$('.dropDown').css("display", "none");
});
//给省级列表添加mouseover事件
$('.dropProvLi').on('mouseover', function () {
$('.dropCityUl').empty();
cityName = $(this).context.innerText
unId = $(this).attr('id')
aId = ''
$(this).addClass('cityActive').siblings().removeClass('cityActive')
$('.dropCity').css('display', 'block')
if (unId != '') {
通过城市里面鼠标经过获取的id来获取县级或区
getSite(unId)
} else {
getSite(unitID)
}
});
});
//删除并清空已经选中的值
$('.delectText').click(function () {
$('.cityName').text('');
cityName = ''
siteName = ''
unId = ''
aId = ''
$('.delectText').css('display', 'none')
event.stopPropagation()
})
})
$(document).click(function (e) {
var $target = $(e.target);
//点击地市框以外的地方隐藏盒子
if (!$target.is('#search *') && !$target.is('.dropDown')) {
$('.dropDown').hide();
}
});