Jquery实现二级下拉选择框

最新推荐文章于 2024-07-30 03:25:04 发布

波波只会Cv

最新推荐文章于 2024-07-30 03:25:04 发布

阅读量814

点赞数

分类专栏：代码呀文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_50813407/article/details/127860536

版权

代码呀专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML:

<div>
    <div>地市/站点：</div>
	<div id="search" class="node">
        //搜索框
		<div class="citySelect">
			<span class="cityName"></span>
			<div class="iconfont delectText">
				&#xf203;
			</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();
		}
	});