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

Contents

表を検索したい!簡単に!

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索(絞り込み)する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス:WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索(絞り込み)する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。



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

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

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

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

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

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

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

      お役に立てば幸いです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメントを残す