![[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)](https://i0.wp.com/onocom.net/blog/wp-content/uploads/2017/03/search_1488601984.jpg?resize=825%2C510)
表を検索したい！簡単に！
都道府県別にある情報を簡単に絞り込みたい。というご要望。
セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。
というかたちで実装を考えました。
テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。
jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。
参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。
動作デモ・ソースコード
動作デモ
http://onocom.net/code/japan-prefecture/
ソースコード
https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570
ライセンス：WTFPL
好きに利用して改変して下さい。
実装したこと
セレクトボックスで選択した値(value)で表を検索（絞り込み）する機能を実装します。
ソースと解説
ソースコードサンプルと合わせてご覧くださいませ。
1.表を作る
取り敢えず検索するための表を作ります。
今回、都道府県の一覧表を作りました。
theadに見出しを。tbodyにデータを記述しましょう。
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 | <table class="table table-borderd"> <thead> <tr class="active"> <td>番号</td> <td>都道府県名</td> <td>読み</td> <td>都道府県庁 所在地</td> <td>最大都市</td> <td>地方</td> </tr> </thead> <tbody> <tr> <td>01</td> <td>北海道</td> <td>ほっかいどう</td> <td>札幌市</td> <td>札幌市</td> <td>北海道</td> </tr> <tr> <td>02</td> <td>青森県</td> <td>あおもりけん</td> <td>青森市</td> <td>青森市</td> <td>東北</td> </tr> ・・・ </tbody> </table> |
2.都道府県選択用のセレクトボックスを作る
表を絞り込む為のセレクトボックスを作ります。
1 2 3 4 5 6 | <select id="pref-select" class="form-control"> <option value="">都道府県で絞り込み</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> ・・・ </select> |
optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。
1 | <option value="青森県">青森県で絞り込む</option> |
また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。
3.JavaScriptを組む
キモとなるJavaScriptのコードは以下のように記述します。
コメントで処理を補足しておりますので、参考にしてみてくださいませ。
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 | jQuery(function ($) { // セレクトボックスが変更されたら処理をする $('#pref-select').change(function () { // 選択した値を取得 var select_val = $('#pref-select option:selected').val(); // tbodyのtr数回 処理をする $.each($("#pref-table tbody tr"), function (index, element) { // 選択した値が空欄だったら、全ての行を表示する為の処理 if (select_val == "") { $(element).css("display", "table-row"); return true; // 次のtrへ } // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック var row_text = $(element).text(); if (row_text.indexOf(select_val) != -1) { // 見つかった場合は表示する $(element).css("display", "table-row"); } else { // 見つからなかった場合は非表示に $(element).css("display", "none"); } }); }); }); |
まとめ
あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。
もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。
お役に立てば幸いです。
