[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

「[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)」への9件のフィードバック

1. 初めまして。こちらを参考にテーブルを絞り込みできるようになりました！ありがとうございます。
   現在、セレクトボックスの連動(2段階)→連動結果からテーブル絞り込みという形を作っているんですが、この絞り込みを解除するようなボタンって作れますか？教えていただけるとありがたいです。。

   返信

   1. megさんご質問ありがとうございます！

      絞り込みを解除する処理を入れたいということですね。

      リセットボタンがクリックされた時にセレクトボックスを初期化する処理と行の非表示を解除する処理を書いてあげればよろしいかと。

      この記事で紹介している都道府県の絞り込み処理をリセットする処理を書いてみました。ご参考にいただければ幸いです。

      <script> jQuery(function ($) { $('#reset').click(function () { // セレクトボックスを初期化 $('#pref-select').get(0).selectedIndex = 0; // 表の絞り込みを初期化 $.each($("#pref-table tbody tr"), function (index, element) { $(element).css("display", "table-row"); }); }); }); </script>

      1 2 3 4 5 6 7 8 9 10 11 12 13

      <script>   jQuery(function ($) {     $('#reset').click(function () {       // セレクトボックスを初期化       $('#pref-select').get(0).selectedIndex = 0;              // 表の絞り込みを初期化       $.each($("#pref-table tbody tr"), function (index, element) {         $(element).css("display", "table-row");       });     });   }); </script>

      上記を追加頂き、以下のようにidがresetとなっているボタンを何処かに配置することで、そのボタンをクリックした時に選択状態が解除されるはずです。

      // どこかにリセットボタンを設置 <input type="button" id="reset" value="選択をリセット">

      1 2	// どこかにリセットボタンを設置 <input type="button" id="reset" value="選択をリセット">

      お役に立てば幸いです。

      返信

2. 参考にさせていただきました。

   こちらのJSですが、
   検索項目が2つのセルからなるandでの絞り込みは、やはり難しいでしょうか。
   列をテキストにしている部分を、セルにできればできるのかな、とも思ったのですがうまくいかず…
   また可能な場合、「カレー」と「カレーうどん」のように一部のテキストがかぶってしまってはどうしようもないでしょうか。
   JSについては初心者のため、1から10までクレクレしているようで申し訳ないです。
   一部分でもわかれば展開できるかな、と思っております。

   お手すきの際に見ていただけますと幸いです。

   返信

   1. sakeさん、ご質問ありがとうございます。

      複数条件の絞り込みを入れたいということですね。

      このような形で実装してみてはいかがでしょうか？適当な実装ですみません。エッセンスだけでも参考になればと。

      ２つの条件で絞り込むサンプル作りました。
      http://onocom.net/code/japan-prefecture/index_2.html

      jQuery(function ($) { // 都道府県選択か別のセレクトボックスが変更されたら処理をする $('#pref-select,#other-select').change(function () { // 選択した値を取得 var select_val1 = $('#pref-select option:selected').val(); var select_val2 = $('#other-select option:selected').val(); // tbodyのtr数回 処理をする $.each($("#pref-table tbody tr"), function (index, element) { // 選択した値がともに空欄だったら、全ての行を表示する為の処理 if (select_val1 == "" && select_val2 == "") { $(element).css("display", "table-row"); return true; // 次のtrへ } // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック var row_text = $(element).text(); // フラグをfalseで初期化 var is_val1_match = false; var is_val2_match = false; // １つ目の値が空欄、もしくは、値が存在するか？ if ( select_val1 == "" || row_text.indexOf(select_val1) != -1 ) { is_val1_match = true; } // ２つ目の値が空欄、もしくは、値が存在するか？ if ( select_val2 == "" || row_text.indexOf(select_val2) != -1 ) { is_val2_match = true; } // ２つの値の結果をチェックして、ともにtrueなら表示 if ( is_val1_match && is_val2_match ) { // 見つかった場合は表示する $(element).css("display", "table-row"); } else { // 見つからなかった場合は非表示に $(element).css("display", "none"); } }); }); });

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

      jQuery(function ($) {     // 都道府県選択か別のセレクトボックスが変更されたら処理をする     $('#pref-select,#other-select').change(function () {              // 選択した値を取得         var select_val1 = $('#pref-select  option:selected').val();         var select_val2 = $('#other-select option:selected').val();                  // tbodyのtr数回 処理をする         $.each($("#pref-table tbody tr"), function (index, element) {                      // 選択した値がともに空欄だったら、全ての行を表示する為の処理             if (select_val1 == "" && select_val2 == "") {                 $(element).css("display", "table-row");                 return true; // 次のtrへ             }                          // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック             var row_text = $(element).text();                          // フラグをfalseで初期化             var is_val1_match = false;             var is_val2_match = false;                          // １つ目の値が空欄、もしくは、値が存在するか？             if (  select_val1 == "" || row_text.indexOf(select_val1) != -1 ) {                 is_val1_match = true;             }                          // ２つ目の値が空欄、もしくは、値が存在するか？             if (  select_val2 == "" || row_text.indexOf(select_val2) != -1 ) {                 is_val2_match = true;             }                          // ２つの値の結果をチェックして、ともにtrueなら表示             if (  is_val1_match && is_val2_match ) {                 // 見つかった場合は表示する                 $(element).css("display", "table-row");             } else {                 // 見つからなかった場合は非表示に                 $(element).css("display", "none");             }                      });     }); });

      ちなみにこの方法だと、sakeさんがご指摘のように【「カレー」と「カレーうどん」のように一部のテキストがかぶってしまう。】というのはどうしようもないです。

      カレーとカレーうどんを区別する方法はぜひご自身でチャレンジしてみてください(^o^)

      返信

3. はじめまして。参考にさせていただきました。ありがとうございます。

   こちらのJS、trでなくtdでの絞り込みは可能でしょうか？
   テキストの入ったtdを3列で配置しているのですが、絞り込みを使うと全て改行されて
   レイアウトが崩れてしまいます。
   (当てはまらないものを除外したところにそのまま詰めて表示されるのが理想なのですが……)

   説明下手で申し訳ありませんが、助力をいただけると幸いです。

   返信

   1. ご相談ありがとうございます。
      現在、以下の分岐の箇所で、現在、行を表示「する」「しない」だけを設定しておりますが、「行を表示する」場合、さらにその行のtdをループで取得して細かく表示/非表示を切り替えたらどうでしょうか？

      if (row_text.indexOf(select_val) != -1) { $(element).css("display", "table-row"); // 行を表示する // ここでtdを1つずつ取り出してチェックしていくかんじでどうでしょうか？ } else { $(element).css("display", "none"); // 行を表示しない }

      1 2 3 4 5 6

      if (row_text.indexOf(select_val) != -1) { $(element).css("display", "table-row"); // 行を表示する // ここでtdを1つずつ取り出してチェックしていくかんじでどうでしょうか？ } else { $(element).css("display", "none"); // 行を表示しない }

      雑な回答でごめんなさい。解決のヒントになれば幸いです。

      返信

4. はじめまして。参考にさせて頂きました。
   一点ご質問なのですが、表示件数を取得したい場合どのようにすればよいのでしょうか。。

   返信

   1. ご相談ありがとうございます。
      表示されている件数を取得したい場合は、以下のコードで現在表示されている件数が取得できるかと思います。
      ご参考にいただければ幸いです。

      $("#pref-table tbody tr:visible").length

      1	$("#pref-table tbody tr:visible").length

      返信

5. はじめまして。参考にさせて頂きました。
   ご質問なのですが、セレクトボックス未選択時に、リストを非表示（項目だけ残す）にする場合はどのようにすればよいのでしょうか。
   お手すきの際に見ていただけますと幸いです。

   返信