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