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

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

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

セレクトボックスに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] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)」への2件のフィードバック

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

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

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

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

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

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

      お役に立てば幸いです。

コメントを残す