2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js
概要
incboxfilter_select.jsをさらに改造して、2つのプルダウンセレクターで要素の絞込表示をする。
成果物
- https://hi3103.net/study/boxfilter_double/
- https://hi3103.net/study/incboxfilter_double/
- incファイルの場合
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/boxfilter_double.js"></script>
<title>boxfilter_double.js</title>
</head>
<body>
<select name="filter_area" class="filters">
<option value="area_all" selected="selected">Show All Area</option>
<option value="area_1">Show Area_1</option>
<option value="area_2">Show Area_2</option>
<option value="area_3">Show Area_3</option>
<option value="area_4">Show Area_4</option>
</select>
<select name="filter_genre" class="filters">
<option value="genre_all" selected="selected">Show All Genre</option>
<option value="genre_1">Show Genre_1</option>
<option value="genre_2">Show Genre_2</option>
<option value="genre_3">Show Genre_3</option>
</select>
<div class="boxes">
<a class="area_1 genre_1 genre_2" href="#">Box1</a>
<a class="area_2 genre_1 genre_3" href="#">Box2</a>
<a class="area_3 genre_2 genre_3" href="#">Box3</a>
<a class="area_4 genre_3" href="#">Box4</a>
<a class="area_1 genre_1 genre_2 genre_3" href="#">Box5</a>
<a class="area_2 genre_1 genre_2" href="#">Box6</a>
<a class="area_3 genre_1 genre_3" href="#">Box7</a>
<a class="area_4 genre_1 genre_2 genre_3" href="#">Box8</a>
<a class="area_1 genre_1 genre_3" href="#">Box9</a>
<a class="area_2 genre_1 genre_2 genre_3" href="#">Box10</a>
<a class="area_3 genre_3" href="#">Box11</a>
<a class="area_4 genre_1 genre_2 genre_3" href="#">Box12</a>
<a class="area_1 genre_1 genre_2 genre_3" href="#">Box13</a>
<a class="area_2 genre_1 genre_3" href="#">Box14</a>
<a class="area_3 genre_1 genre_2" href="#">Box15</a>
<a class="area_4 genre_1 genre_3" href="#">Box16</a>
<a class="area_1 genre_3" href="#">Box17</a>
<a class="area_2 genre_1 genre_2 genre_3" href="#">Box18</a>
<a class="area_3 genre_1 genre_2 genre_3" href="#">Box19</a>
<a class="area_4 genre_1 genre_2" href="#">Box20</a>
</div>
</body>
</html>boxfilter_double.js
$(document).ready(function(){
var $boxes = $('.boxes a');
$('select.filters').change(function () {
$boxes.removeClass('match');
$('select[name=filter_area] option:selected').each(function () {
var $sa = $(this).attr('value');
if($sa == 'area_all'){
$boxes.addClass('match');
}else if($boxes.hasClass($sa)){
$boxes.filter('.'+$sa).addClass('match');
}
});
$('select[name=filter_genre] option:selected').each(function () {
var $sg = $(this).attr('value');
if($sg != 'genre_all' && $boxes.hasClass('match')){
$boxes.filter(':not(.'+$sg+')').removeClass('match');
}
});
$boxes.fadeOut().promise().done(function() {
$boxes.filter('.match').fadeIn();
});
});
});style.CSS
@charset "UTF-8";
a {
display: inline-block;
text-decoration: none;
text-align: center;
margin-bottom: 1em;
margin-right: 1em;
}
.boxes a {
width: 10em;
color:#CCC;
}
.area_1{ border: 2px solid gold; }
.area_2{ border: 2px solid lightblue; }
.area_3{ border: 2px solid lightgreen; }
.area_4{ border: 2px solid pink; }
.match{
background-color: #000;
color: #FFF;
}