单选+多选的筛选

编程语言 2018-07-05 00:10:16 阅读次数: 0

    在好多时候我们需要做一些筛选数据的功能，除了搜索框直接搜索外，还有哪些？今天，小妖同学要分享的一个筛选是长出现在购物网站上的，先来看看效果。

    

    这是有着一行的单选+点击更多后的全部单选选项+多选的功能集合，当选中之后出现在已选择的区域显示，并做好分类，当叉掉后，对应类别重现。

    代码对应效果下载地址：点击打开链接

   以下是它的实现代码

    （1）HTML代码


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>筛选</title>
	<link rel="stylesheet" href="index.css" />
</head>
<body> 
	<div class="search">
		<!--已选类别-->
		<div class="atp_choosed overflow">
			<div class="left title col666">已选类别：</div>
			<div class="left conn" style="width: 780px;"></div>
		</div>
		<!--筛选内容(全部作者)-->
		<div class="scholars-recommend-content att-choose">
			<div class="scholars-choose-box default-box">
				<p class="choose-content left">
					<em>全部作者</em>
					<span>学者姓名1（数量）</span>
					<span>学者姓名2（数量）</span>
					<span>学者姓名3（数量）</span>
					<span>学者姓名4（数量）</span>
				</p>
				<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
					<div class="title left">全部作者</div>
					<ul class="left">
						<li>学者姓名1（数量）</li>
						<li>学者姓名2（数量）</li>
						<li>学者姓名3（数量）</li>
						<li>学者姓名4（数量）</li>
						<li>学者姓名5（数量）</li>
						<li>学者姓名6（数量）</li>
						<li>学者姓名7（数量）</li>
						<li>学者姓名8（数量）</li>
						<li>学者姓名9（数量）</li>
					</ul>
				</div>
				<button class="sch-moreChoose sch-getmore">更多</button>
				<button class="sch-moreChoose">+多选</button>
			</div>
			<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
				<form action="">
					<div class="title left">全部作者</div>
					<ul class="left">
						<li><input type="checkbox">学者姓名1（数量）</li>
						<li><input type="checkbox">学者姓名2（数量）</li>
						<li><input type="checkbox">学者姓名3（数量）</li>
						<li><input type="checkbox">学者姓名4（数量）</li>
						<li><input type="checkbox">学者姓名5（数量）</li>
						<li><input type="checkbox">学者姓名6（数量）</li>
						<li><input type="checkbox">学者姓名7（数量）</li>	
						<li><input type="checkbox">学者姓名8（数量）</li>
						<li><input type="checkbox">学者姓名9（数量）</li>					
					</ul>
					<div class="btns left">
						<p><input type="button" class="sure" value="确定"></p>
						<p><input type="reset" class="false" value="取消"></p>
					</div>
				</form>
			</div>	
		</div>
		
		<!--筛选内容(全部领域)-->
		<div class="scholars-recommend-content att-choose">
			<div class="scholars-choose-box default-box">
				<p class="choose-content left">
					<em>全部领域</em>
					<span>学科领域1（数量）</span>
					<span>学科领域1（数量）</span>
					<span>学科领域1（数量）</span>
					<span>学科领域1（数量）</span>
				</p>
				<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
					<div class="title left">全部领域</div>
					<ul class="left">
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
						<li>学科领域1（数量）</li>
					</ul>
				</div>
				<button class="sch-moreChoose sch-getmore">更多</button>
				<button class="sch-moreChoose">+多选</button>
			</div>
			<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
				<form action="">
					<div class="title left">全部领域</div>
					<ul class="left">
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>	
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>	
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>
						<li><input type="checkbox">学科领域1（数量）</li>						
					</ul>
					<div class="btns left">
						<p><input type="button" class="sure" value="确定"></p>
						<p><input type="reset" class="false" value="取消"></p>
					</div>
				</form>
			</div>	
		</div>
		<!--筛选内容(全部研究方向)-->
		<div class="scholars-recommend-content att-choose">
			<div class="scholars-choose-box default-box">
				<p class="choose-content left">
					<em>全部研究方向</em>
					<span>研究方向1（数量）</span>
					<span>研究方向2（数量）</span>
					<span>研究方向3（数量）</span>
					<span>研究方向4（数量）</span>
				</p>
				<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
					<div class="title left">全部研究方向</div>
					<ul class="left">
						<li>研究方向1（数量）</li>
						<li>研究方向2（数量）</li>
						<li>研究方向3（数量）</li>
						<li>研究方向4（数量）</li>
						<li>研究方向5（数量）</li>
						<li>研究方向6（数量）</li>
						<li>研究方向7（数量）</li>
						<li>研究方向8（数量）</li>
						<li>研究方向9（数量）</li>
					</ul>
				</div>
				<button class="sch-moreChoose sch-getmore">更多</button>
				<button class="sch-moreChoose">+多选</button>
			</div>
			<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
				<form action="">
					<div class="title left">全部研究方向</div>
					<ul class="left">
						<li><input type="checkbox">研究方向1（数量）</li>
						<li><input type="checkbox">研究方向2（数量）</li>
						<li><input type="checkbox">研究方向3（数量）</li>
						<li><input type="checkbox">研究方向4（数量）</li>
						<li><input type="checkbox">研究方向5（数量）</li>
						<li><input type="checkbox">研究方向6（数量）</li>
						<li><input type="checkbox">研究方向7（数量）</li>	
						<li><input type="checkbox">研究方向8（数量）</li>
						<li><input type="checkbox">研究方向9（数量）</li>					
					</ul>
					<div class="btns left">
						<p><input type="button" class="sure" value="确定"></p>
						<p><input type="reset" class="false" value="取消"></p>
					</div>
				</form>
			</div>	
		</div>
	</div>
	
	<script src="jquery-1.8.3.min.js"></script>
	<script src="index.js"></script>
</body>
</html>

（2）CSS

@charset "UTF-8";
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {font-weight: normal ;}
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; padding:0;margin:0;}
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 14px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }
.left{
	float:left;
}
.right{
	float:right;
}
.hide{
	display: none;
}
.clear{
	clear:both;
}
.overflow{
	overflow: hidden;
}
.atp_choosed{
	margin-top:12px;
	display: none;
}
.atp_choosed .conn .tally{
	display: inline-block;
	padding:0px 14px;
	background:#ff9980;
	color:#fff;
	font-size:14px;	
	margin: 0 10px 6px 0;
}
.atp_choosed .conn .tally i{
	margin-left:14px;
	cursor: pointer;
}
.scholars-recommend-content{
	background:#fff;
	margin-top: 20px;
	overflow: hidden;
}
.scholars-recommend-content .choose-content{
	height:34px;
	line-height: 34px;
	background:#EFEEEE;
	width:740px;
}
.scholars-recommend-content .choose-content em{
	display: inline-block;
	font-size:18px;
	color:#fff;
	padding:0 16px;
	background: #79ADD6;
}
.scholars-recommend-content .choose-content2{
	background: transparent;
}
.scholars-recommend-content .choose-content2 em{
	background: transparent;
	color:#79ADD6;
}
.scholars-recommend-content .choose-content span{
	color:#999;
	padding:0 10px;
	cursor: pointer;
}
.scholars-recommend-content .choose-content2 span{
	display: inline-block;
	padding:2px 8px;
	border:1px solid #79ADD6;
	border-radius: 5px 0 5px 0;
	line-height: 18px;
	margin:0 6px;
}

.scholars-recommend-content .sch-moreChoose{
	  width: 51px;
    color: #fff;
    background: #FF8700;
    outline: 0;
    height: 34px;
    float: left;
    cursor: pointer;
    border: 0;
    margin-left: 4px;
}
.scholars-recommend-content .sch-getmore{
	background: #79ADD6;
}
.scholars-choose-box{
	overflow: hidden;
}
.scholars-choose-box2 ul li{
	float:left;
	margin:0 18px 16px 0;
	color:#999;
	cursor: pointer;
}
.scholars-choose-box2 ul li input{
	position: relative;
	top:1px;
	margin-right:4px;
}
.scholars-choose-box2 div.title{
	color:#79add6;
	font-size:18px;
	padding:14px 20px 0 30px;
}
.scholars-choose-box2{
	padding-top:16px;
	border:1px solid #D7D7D7;
	display: none;
	width: 738px;
}
.scholars-choose-box2 ul{
	width: 578px;
}
.scholars-choose-box2 .btns input{
	width:54px;
	height:26px;
	color:#fff;
	background:#75ACD6;
	cursor: pointer;
	border:1px solid transparent;
	outline: 0;
}
.scholars-choose-box2 .btns p{
	margin-bottom: 8px;
}
.scholars-choose-box2 .btns input.false{
	background:#fff;
	border-color:#75ACD6;
  color:#75ACD6;
}
.atpcontian .att-choose .seemorebox{
	width: 708px;
}
.choosemorebox{
	width: 848px;
}
.scholars-choose-box2 .btns {
    padding: 2px 0 0 30px;
    height: 100%;
    border-left: 1px solid #D7D7D7;
}
.search{
	width: 850px;
	margin:0 auto;
	padding-top:100px;
}

（3）jQuery的代码 

$(function(){
	//筛选条件单选点击事件
	$('.scholars-choose-box').on('click','.choose-content span',function(){
		var conn = $(this).text();
		var tit = $(this).siblings('em').text();
		conn = tit.substring(2,tit.length) +"："+conn;
		var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>';	
		$('.atp_choosed').fadeIn();
		$('.atp_choosed .conn').append(add);
		$(this).parent().parent().hide();
	});
	//更多中单机选择事件
	$('.scholars-recommend-content').on('click','.seemorebox li',function(){
		var conn = $(this).text();
		var tit = $(this).parent().siblings('.title').text();
		conn = tit.substring(2,tit.length)+"："+conn;
		var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>';		
		$('.atp_choosed').fadeIn();
		$('.atp_choosed .conn').append(add);
		$(this).parent().parent().siblings('.sch-getmore').text('更多');
		$(this).parent().parent().hide();
		$(this).parent().parent().siblings('.choose-content').show();
		$(this).parent().parent().parent().hide();				
	});
	//点击多选
	$('.scholars-choose-box').on('click','.sch-moreChoose',function(){
		if($(this).hasClass('sch-getmore')){
			if($(this).text()=='更多'){
				$(this).text('收起');
				$(this).siblings('.seemorebox').show();
				$(this).siblings('.choose-content').hide();
			}else{
				$(this).text('更多');
				$(this).siblings('.seemorebox').hide();
				$(this).siblings('.choose-content').show();
			}									
		}else{
			$(this).parent().siblings('.choosemorebox').show();	
			$(this).parent().hide();
		}
		
	});
	//多选确定
	$('.scholars-choose-box.scholars-choose-box2').on('click','.sure',function(){
		var conn = $(this).parent().parent().siblings('.title').text();
		conn = conn.substring(2,conn.length)+'：';
		$(this).parent().parent().siblings('ul').find('li').each(function(){
			if($(this).find('input').prop('checked')==true){
				conn+=$(this).text()+'、';
			}
		});
		
		var tolength = $(this).parent().parent().siblings('ul').find('li').length;
		conn=conn.substring(0,conn.length-1);
		$('.atp_choosed').fadeIn();
		var add = '<span class="tally">'+conn+'<i class="iconfont icon-guanbi">X</i></span>';
		$('.atp_choosed .conn').append(add);
		$(this).parent().parent().parent().parent().hide();		

	});
	//多选取消
	$('.scholars-choose-box.scholars-choose-box2').on('click','.false',function(){
		$(this).parent().parent().parent().parent().hide();
		$(this).parent().parent().parent().parent().siblings('.default-box').show();
	});
	//删除选项
	$('.atp_choosed').on('click','.icon-guanbi',function(){		
		var choosetit = $(this).parent().text().split('：')[0];
		var index = 0;
		switch(choosetit){
			case '作者':
				index = 0;
				break;
			case '领域':
				index = 1;
				break;
			case '研究方向':
				index = 2;
				break;
			default:
				index = 3;
				
		}
		$(this).parent().remove();
		$('.att-choose').eq(index).children('.default-box').show();
		if($('.atp_choosed').find('.conn').html()==''){
			$('.atp_choosed').hide();
		}
		
	});
	
})

    在初步完成之后，测出来有一个小bug。就是直接点击更多然后选择之后，这是选项框已经隐藏，但是‘更多’的那个按钮的字已经变成‘收起’，关闭此选项框选中的内容后他显示出来的依旧是‘收起’。所以，要在更多中点击之后要将‘收起’改成‘更多’。

猜你喜欢

转载自blog.csdn.net/sty_fly1203/article/details/80856748
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022