本文介绍了一种类似于淘宝的多选筛选组件实现方案，包括时间筛选的联动效果、动态显示已选条件及清空筛选功能。通过HTML、CSS和JS代码展示了如何创建一个交互丰富的筛选界面。
一.实现功能
类似于淘宝可以多选筛选条件，同一筛选条件如果选项过多可以设置一个“更多”按钮，超过一行的数据会隐藏掉，时间筛选可以进行联动（下拉框样式稍作改动）。效果如下图:
1.主图
2.时间联动
3.选中条件，下方动态添加已选条件。重新点击条件可以进行反选或者在已选条件中亦可删除，上下会进行联动。超过一个已选条件时，会出现“清空筛选”按钮。
二.关键的html代码
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-row">
<h2>新增统计</h2>
</div>
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-inline condition_title">时间</div>
<div class="layui-inline time_type_div">
<select id="time_type" lay-filter="timeType">
<option value="1">按年份</option>
<option value="2">按半年</option>
<option value="3">按季度</option>
<option value="4">按月份</option>
</select>
</div>
<div class="layui-inline time_year_div">
<select id="time_year">
</select>
</div>
<div class="layui-inline time_detail_div">
<select id="time_detail">
</select>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-inline condition_title">轨迹状态</div>
<div class="layui-inline" id="div_status_area">
<button class="condition unselect_btn">邀请面试</button>
<button class="condition unselect_btn">被投简</button>
<button class="condition unselect_btn">成功握手</button>
<button class="condition unselect_btn">面试结果反馈</button>
<button class="condition unselect_btn">确认入职</button>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-inline condition_title">行业</div>
<div class="layui-inline" id="div_industry_area" style="width:70%;overflow:hidden;height:42px;">
<button class="condition unselect_btn">计算机服务业</button>
<button class="condition unselect_btn">服务业</button>
<button class="condition unselect_btn">环境管理业</button>
<button class="condition unselect_btn">餐饮业</button>
<button class="condition unselect_btn">旅游业</button>
<button class="condition unselect_btn">广告业</button>
<button class="condition unselect_btn">通信业</button>
<button class="condition unselect_btn">汽车业</button>
<button class="condition unselect_btn">传媒业</button>
</div>
<button class="more" onclick="return More(this)">更多+</button>
</div>
</div>
<div class="layui-row">
<p style="font-size: 16px;">已选条件：</p>
<div class="layui-col-xs12">
<div class="layui-inline" id="selected_area">
</div>
<a id="clear_all" style="display: none;color:#4668B0;cursor: pointer;">清空筛选</a>
</div>
</div>
<div class="layui-row">
<button id="search">开始统计</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function More(a) {
var dv = a.parentNode.children[1], exp = a.innerHTML == '更多+';
dv.style.height = exp ? '' : '42px';
a.innerHTML=exp?'收起-':'更多+'
return false;
}
</script>
三.关键的js代码
layui.config({
base: '/base/sea-modules/1.0/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table','layer'], function(){
//兼容低版本ie
var device = layui.device();
var ie = parseInt(device.ie);
if (ie <= 8) {
$ = layui.$;
}
var form = layui.form
,table = layui.table;
form.render();
//下拉框加载近10年的年份
(function get10Year(){
var date = new Date();
var year = date.getFullYear();
for(var i=0;i<10;i++){
$("#time_year").append(new Option(year-i,year-i));
}
form.render("select");
})();
//时间筛选联动改变事件
form.on("select(timeType)",function(data){
var id = data.value;
if(id==1){
$(".time_detail_div").hide();
}else if(id==2){
$("#time_detail").empty();
$("#time_detail").append(new Option("上半年",1));
$("#time_detail").append(new Option("下半年",2));
$(".time_detail_div").css('display','inline-block');
}else if(id==3){
$("#time_detail").empty();
$("#time_detail").append(new Option("一季度",1));
$("#time_detail").append(new Option("二季度",2));
$("#time_detail").append(new Option("三季度",3));
$("#time_detail").append(new Option("四季度",4));
$(".time_detail_div").css('display','inline-block');
}else if(id==4){
$("#time_detail").empty();
$("#time_detail").append(new Option("1月份",1));
$("#time_detail").append(new Option("2月份",2));
$("#time_detail").append(new Option("3月份",3));
$("#time_detail").append(new Option("4月份",4));
$("#time_detail").append(new Option("5月份",5));
$("#time_detail").append(new Option("6月份",6));
$("#time_detail").append(new Option("7月份",7));
$("#time_detail").append(new Option("8月份",8));
$("#time_detail").append(new Option("9月份",9));
$("#time_detail").append(new Option("10月份",10));
$("#time_detail").append(new Option("11月份",11));
$("#time_detail").append(new Option("12月份",12));
$(".time_detail_div").css('display','inline-block');
}
form.render("select");
})
//条件点击事件
$(".condition").on("click",function(){
var $this = $(this);
var text = $this.parent().prev().text()+":"+$this.text();
if($this.hasClass("select_btn")){
$this.removeClass("select_btn").addClass("unselect_btn");
$(".selectedFairId").each(function(index, element) {
var data_val = $(this).text();
data_val = data_val.substring(0,data_val.length-1);
if (text == data_val) {
$(this).remove();
}
});
}else{
$this.removeClass("unselect_btn").addClass("select_btn");
var isRepaet = false; //是否重复
$(".selectedFairId").each(function(index, element) {
var data_val = $(this).text();
data_val = data_val.substring(0,data_val.length-1);
if (text == data_val) {
isRepaet = true;
}
});
if(isRepaet == false){
var html = "<span class=\"selectedFairId\" " +
"data-val=\""+$this.parent().attr("id")+"\">"+text+
"<span class=\"del\">X</span></span>";
$("#selected_area").append(html);
}
}
});
//已选条件的删除按钮点击事件
$(document).on("click",".del",function() {
var text = $(this).parent().text();
text = text.substring(0,text.length-1);
text = (text.split(":"))[1];
var id = $(this).parent().attr("data-val");
$("#"+id+" button").each(function(){
if($(this).text()==text){
$(this).addClass("unselect_btn").removeClass("select_btn");
}
})
$(this).parent().remove();
});
//已选条件节点新增事件
$("#selected_area").on("DOMNodeInserted",function(){
if($(".selectedFairId").length=1){
$("#clear_all").show();
}
});
//已选条件节点移除事件
$("#selected_area").on("DOMNodeRemoved",function(){
if($(".selectedFairId").length==1){
$("#clear_all").hide();
}
});
//清空筛选按钮点击事件
$("#clear_all").on("click",function(){
$(".del").each(function(index, element) {
$(this).click();
});
});
//统计按钮点击事件
$("#search").on("click",function(){
$.post("/back/qjgj/startSearchData",function(data){
alert(1);
})
})
});
四.关键的css代码
h2 {
padding: 15px;
border-bottom: 1px solid #d5d0d0;
}
.layui-layer-dialog .layui-layer-content {
padding: 0px;
}
.layui-inline {
vertical-align: inherit;
}
.unselect_btn {
line-height: 2.4;
border: 1px #c7cacb solid;
background: #fff;
padding: 0 15px;
cursor: pointer;
margin-right: 15px;
color: #969899;
border-radius: 2px;
}
.select_btn {
line-height: 2.4;
background: #4063AE;
padding: 0 15px;
margin-right: 15px;
cursor: pointer;
color: #fff;
border: none;
border: 1px #4063AE solid;
border-radius: 2px;
}
.condition_title {
text-align: left;
padding-right: 10px;
font-size: 16px;
line-height: 2.4;
vertical-align: top;
width: 80px;
}
.selectedFairId {
background: #EFF1F9;
padding: 7px 7px 7px 7px;
margin-right: 5px;
border-radius: 4px;
}
.del {
margin-left: 5px;
cursor: pointer;
color: #459ae9;
text-decoration: none;
}
.del:HOVER {
margin-left: 5px;
cursor: pointer;
color: red;
text-decoration: none;
}
.more {
border: none;
vertical-align: top;
color: #4668B0;
border-radius: 4px;
background: #EFF1F9;
width: 80px;
height: 30px;
margin-top: 6px;
cursor: pointer;
}
#search {
font-size: 17px;
background: #6888F8;
line-height: 2.4;
border: none;
padding: 0 50px;
cursor: pointer;
margin: 0 auto;
color: #fff;
border-radius: 4px;
display: block;
margin-top: 50px;
}
.time_type_div {
width: 85px;
}
.time_type_div .layui-select-title input {
border: none;
color: #4668B0;
}
.time_year_div {
width: 75px;
}
.time_year_div .layui-select-title input {
border: none;
color: #4668B0;
}
.time_detail_div {
width: 85px;
display: none;
}
.time_detail_div .layui-select-title input {
border: none;
color: #4668B0;
}
.layui-form-select .layui-edge {
border-top-color: #4668B0;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
