セレクトボックスとチェックボックスを使って、tableの行を絞り込み表示させたいです。
（javascript初心者なのでオープンソースを書き換えて使用しています。）

最初はtableの行が全て表示している状態で、セレクトボックスとチェックボックスでAND検索させていきたいです。

できれば、全ての選択を解除する「選択をクリアする」ボタンと、該当データが無い場合に空欄ではなく「該当がありません」が表示されればベストです。

よろしくお願いいたします。

発生している問題・エラーメッセージ

セレクトボックスは2項目設置し連動できたのですが、チェックボックスでの複数選択が増えた場合にわからなくなってしまいました、、、

該当のソースコード

検索項目は3つです。

<div id="search-bx">

<select id="1-select" class="store-select" name="area">
<option value="">地域から検索</option>
<option value="1area">1-地域</option>
<option value="2area">2-地域</option>
<option value="3area">3-地域</option>
</select>

<div id="2-checkbox">
<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
</div>

<select id="3-select" class="store-select" name="brand">
<option value="">ブランド検索</option>
<option value="1-brand">1-ブランド</option>
<option value="2-brand">2-ブランド</option>
<option value="3-brand">3-ブランド</option>
</select>

</div>

検索対象テーブル

<div id="store-data">
<table>
<thead>
<tr class="active">
<td>地域</td>
<td>都市</td>
<td>ブランド</td>
</tr>
</thead>
<tbody>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="1-city">1-都市</span></td>
<td class="brand"><span class="1-brand">1-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="2-city">2-都市</span></td>
<td class="brand"><span class="2-brand">2-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="3-city">3-都市</span></td>
<td class="brand"><span class="3-brand">3-ブランド</span></td>
</tr>
</tbody>
</table>
</div>

javascriptは下記のようにしたら、セレクトボックス2項目はうまくいきました。
チェックボックスを追加するにはどのようにしたらよいでしょうか？

$(function() {
    var lists = $('#store-data table tbody tr');
    $(document).on('change', '#search-bx select', function() {
        lists.show();
        for (var i = 0; i < $('#search-bx select').length; i++) {
            // 絞り込みの項目を取得
            var item = $('#search-bx select').eq(i).attr('name');
            // 絞り込みの対象を取得
            var target = $('#search-bx select').eq(i).val();
 
            if(target != '') {
                for (var j = 0; j < lists.length; j++) {
                    // 絞り込み対象でない場合は非表示
                    if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
                        lists.eq(j).hide();
                    }
                };
            }
        };
    });
});

yambejp

2018/01/25 06:39

すべて未選択だった場合はALLで表示するのでしょうか？一切表示しないのでしょうか？また地域・都市・ブランドの相互の関係はand検索なのでしょうかor検索なのでしょうか？

ChocolateFct

2018/01/25 06:47

最初の表示はtable全て表示です、未選択の場合も全て表示です。地域と都市とブランドは相互にAND検索で絞りこめるようにしたいです。できれば、最後に「選択をクリアする」ボタンを付けられたらいいのかなとも思っています。

ChocolateFct

2018/01/25 06:48

あと、できれば該当しない場合に空欄ではなく「該当項目がありません。」と表示させるのはできるでしょうか？

m.ts10806

2018/01/25 07:07

後半、質問テンプレート部分が残っています。見ている人に正しく伝わらない原因になりかねませんので、本質門内容と関係ない部分は精査願います。

行動規範の内容に同意します

回答2件

ベストアンサー

テーブルのareaの使い方がちょっとおかしいみたいなので原文のままではありませんが
以下でどうでしょうか？

javascript
1
2$(function(){
3  $('#1-select,.checkbox-input,#3-select').on('change',function(){
4    var area=$('#1-select').val();
5    var city=[];
6    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
7    var brand=$('#3-select').val();
8    if(area=="" && city.length==0 && brand==""){
9      $('#store-data table tr').show();
10    }else{
11      var tr=$('#store-data table tr').hide().filter(function(){
12        return area==""?true:$(this).has("."+area).length>0;
13      }).filter(function(){
14        return brand==""?true:$(this).has("."+brand).length>0;
15      }).filter(function(){
16        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
17      }).show();
18    }
19  }).eq(0).trigger('change');
20});
21

HTML
1<div id="search-bx">
2
3<select id="1-select" class="store-select" name="area">
4<option value="">地域から検索</option>
5<option value="1-area">1-地域</option>
6<option value="2-area">2-地域</option>
7<option value="3-area">3-地域</option>
8</select>
9
10<div id="2-checkbox">
11<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
12<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
13<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
14</div>
15
16<select id="3-select" class="store-select" name="brand">
17<option value="">ブランド検索</option>
18<option value="1-brand">1-ブランド</option>
19<option value="2-brand">2-ブランド</option>
20<option value="3-brand">3-ブランド</option>
21</select>
22
23</div>
24
25<div id="store-data">
26<table>
27<thead>
28<tr class="active">
29<td>地域</td>
30<td>都市</td>
31<td>ブランド</td>
32</tr>
33</thead>
34<tbody>
35<tr>
36<td class="area"><span class="1-area">1-地域</span></td>
37<td class="city"><span class="1-city">1-都市</span></td>
38<td class="brand"><span class="1-brand">1-ブランド</span></td>
39</tr>
40<tr>
41<td class="area"><span class="1-area">1-地域</span></td>
42<td class="city"><span class="2-city">2-都市</span></td>
43<td class="brand"><span class="2-brand">2-ブランド</span></td>
44</tr>
45<tr>
46<td class="area"><span class="1-area">1-地域</span></td>
47<td class="city"><span class="3-city">3-都市</span></td>
48<td class="brand"><span class="3-brand">3-ブランド</span></td>
49</tr>
50</tbody>
51</table>
52</div>

クリアと該当なし

クリアと該当なしを付けるの忘れてました

javascript
1$(function(){
2  $('#1-select,.checkbox-input,#3-select').on('change',function(){
3    var area=$('#1-select').val();
4    var city=[];
5    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
6    var brand=$('#3-select').val();
7    $('#err').remove();
8    if(area=="" && city.length==0 && brand==""){
9      $('#store-data table tr').show();
10    }else{
11      var tr=$('#store-data table tr').hide().filter(function(){
12        return area==""?true:$(this).has("."+area).length>0;
13      }).filter(function(){
14        return brand==""?true:$(this).has("."+brand).length>0;
15      }).filter(function(){
16        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
17      }).show();
18      if(tr.length==0){
19        $("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
20      }
21    }
22  }).eq(0).trigger('change');
23  $('#reset').on('click',function(e){
24    $('#1-select').prop('selectedIndex',0);
25    $('.checkbox-input').prop('checked',false);
26    $('#3-select').prop('selectedIndex',0).trigger('change');
27  });
28});

HTML
1<div id="search-bx">
2<select id="1-select" class="store-select" name="area">
3<option value="">地域から検索</option>
4<option value="1-area">1-地域</option>
5<option value="2-area">2-地域</option>
6<option value="3-area">3-地域</option>
7</select>
8
9<div id="2-checkbox">
10<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
11<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
12<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
13</div>
14
15<select id="3-select" class="store-select" name="brand">
16<option value="">ブランド検索</option>
17<option value="1-brand">1-ブランド</option>
18<option value="2-brand">2-ブランド</option>
19<option value="3-brand">3-ブランド</option>
20</select>
21
22<input type="button" id="reset" value="選択をクリアする">
23</div>
24
25<div id="store-data">
26<table>
27<thead>
28<tr class="active">
29<td>地域</td>
30<td>都市</td>
31<td>ブランド</td>
32</tr>
33</thead>
34<tbody>
35<tr>
36<td class="area"><span class="1-area">1-地域</span></td>
37<td class="city"><span class="1-city">1-都市</span></td>
38<td class="brand"><span class="1-brand">1-ブランド</span></td>
39</tr>
40<tr>
41<td class="area"><span class="1-area">1-地域</span></td>
42<td class="city"><span class="2-city">2-都市</span></td>
43<td class="brand"><span class="2-brand">2-ブランド</span></td>
44</tr>
45<tr>
46<td class="area"><span class="1-area">1-地域</span></td>
47<td class="city"><span class="3-city">3-都市</span></td>
48<td class="brand"><span class="3-brand">3-ブランド</span></td>
49</tr>
50</tbody>
51</table>
52</div>

投稿2018/01/25 07:49

編集2018/01/25 08:09

yambejp

総合スコア114769

ChocolateFct

2018/01/25 08:25

yambejpさま、ありがとうございます！！！クリアボタンと該当なしも付けて頂いて、大変助かりました！私の入力ミスしていたareaの部分も書き換えて頂いてすみません、、こちらでそのまま実装できそうです。早速の回答に感謝申し上げます。ありがとうございました！

ChocolateFct

2018/02/08 10:56

yambejpさま先日は誠にありがとうございました！！もしお時間ございましたらお伺いしたいのですが、、、検索対象の＜table tr＞にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか？例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット（全表示）はいつでも効く状態がベストです。不躾な質問で大変恐縮です。もしお時間ございましたらどうぞよろしくお願いいたします。

行動規範の内容に同意します

javascript
1$(function(){
2  $('[name="message[]"]').on('change',function(){
3    $(this).closest('td').next('td').find('input').prop('disabled',$(this).val()=="0");
4  }).trigger('change');
5});

HTML
1<table>
2<tr>
3<td>
4　　<select name="message[]" class="info_sel">
5      <option value="0"selected>なし</option>
6      <option value="1">あり</option>
7    </select>
8</td>
9<td class="day">
10　　 <input type="text" name="hoge" class="text">
11</td>
12</tr>
13<tr>
14<td>
15　　<select name="message[]" class="info_sel">
16      <option value="0"selected>なし</option>
17      <option value="1">あり</option>
18    </select>
19</td>
20<td class="day">
21　　 <input type="text" name="hoge" class="text">
22</td>
23</tr>
24<tr>
25<td>
26　　<select name="message[]" class="info_sel">
27      <option value="0"selected>なし</option>
28      <option value="1">あり</option>
29    </select>
30</td>
31<td class="day">
32　　 <input type="text" name="hoge" class="text">
33</td>
34</tr>
35</table>
36

投稿2018/02/08 11:15

yambejp

総合スコア114769

ChocolateFct

2018/02/08 12:41

早速の回答ありがとうございます。ですが、こちらの回答はどなたか別の質問と間違えてはおりませんでしょうか？先程のは、前回の頂いた回答に追加する形でできればと思っていたのですが、、 -------------------------- 検索対象の＜table tr＞にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか？例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット（全表示）はいつでも効く状態がベストです。

行動規範の内容に同意します

あなたの回答