首页 前端知识 Jquery实现二级下拉选择框

Jquery实现二级下拉选择框

2024-09-28 23:09:42 前端知识 前端哥 4 938 我要收藏

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();
		}
	});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18692.html
标签
评论
发布的文章

数据持久化(Json)

2024-09-28 23:09:01

JSON Gate 开源项目教程

2024-09-28 23:09:00

【C 】Ubuntu安装jsoncpp

2024-09-28 23:09:58

http请求json

2024-09-28 23:09:58

JSON 格式详解

2024-09-28 23:09:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!