onocomコンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。まとめ表を検索したい!簡単に!都道府県別にある情報を簡単に絞り込みたい。セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索(絞り込み)する。いうかたちで実装を考えました。テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。動作デモ・ソースコード動作デモhttp://onocom.net/code/japan-prefecture/ソースコードhttps://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570ライセンス:WTFPL好きに利用して改変して下さい。実装したことセレクトボックスで選択した値(value)で表を検索(絞り込み)する機能を実装します。ソースと解説ソースコードサンプルと合わせてご覧くださいませ。1.表を作る取り敢えず検索するための表を作ります。今回、都道府県の一覧表を作りました。theadに見出しを。tbodyにデータを記述しましょう。所在地</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.都道府県選択用のセレクトボックスを作る表を絞り込む為のセレクトボックスを作ります。value="青森県">青森県</option>・・・</select>optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。value="青森県">青森県で絞り込む</option>また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。3.JavaScriptを組むキモとなるJavaScriptのコードは以下のように記述します。コメントで処理を補足しておりますので、参考にしてみてくださいませ。"none");}});});});まとめあえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。お役に立てば幸いです。こちらを参考にテーブルを絞り込みできるようになりました!ありがとうございます。現在、セレクトボックスの連動(2段階)→連動結果からテーブル絞り込みという形を作っているんですが、この絞り込みを解除するようなボタンって作れますか?教えていただけるとありがたいです。PMmegさんご質問ありがとうございます!絞り込みを解除する処理を入れたいということですね。リセットボタンがクリックされた時にセレクトボックスを初期化する処理と行の非表示を解除する処理を書いてあげればよろしいかと。この記事で紹介している都道府県の絞り込み処理をリセットする処理を書いてみました。ご参考にいただければ幸いです。"table-row");});});});</script>上記を追加頂き、以下のようにidがresetとなっているボタンを何処かに配置することで、そのボタンをクリックした時に選択状態が解除されるはずです。value="選択をリセット">お役に立てば幸いです。PM参考にさせていただきました。検索項目が2つのセルからなるandでの絞り込みは、やはり難しいでしょうか。列をテキストにしている部分を、セルにできればできるのかな、とも思ったのですがうまくいかず...また可能な場合、「カレー」と「カレーうどん」のように一部のテキストがかぶってしまってはどうしようもないでしょうか。JSについては初心者のため、1から10までクレクレしているようで申し訳ないです。一部分でもわかれば展開できるかな、と思っております。お手すきの際に見ていただけますと幸いです。PMsakeさん、ご質問ありがとうございます。複数条件の絞り込みを入れたいということですね。このような形で実装してみてはいかがでしょうか?適当な実装ですみません。エッセンスだけでも参考になればと。2つの条件で絞り込むサンプル作りました。"none");}});});});ちなみにこの方法だと、sakeさんがご指摘のように【「カレー」と「カレーうどん」のように一部のテキストがかぶってしまう。】というのはどうしようもないです。参考にさせていただきました。ありがとうございます。こちらのJS、trでなくtdでの絞り込みは可能でしょうか?テキストの入ったtdを3列で配置しているのですが、絞り込みを使うと全て改行されてレイアウトが崩れてしまいます。(当てはまらないものを除外したところにそのまま詰めて表示されるのが理想なのですが......)説明下手で申し訳ありませんが、助力をいただけると幸いです。PMご相談ありがとうございます。行を表示しない}雑な回答でごめんなさい。解決のヒントになれば幸いです。参考にさせて頂きました。一点ご質問なのですが、表示件数を取得したい場合どのようにすればよいのでしょうか。PMご相談ありがとうございます。表示されている件数を取得したい場合は、以下のコードで現在表示されている件数が取得できるかと思います。ご参考にいただければ幸いです。参考にさせて頂きました。ご質問なのですが、セレクトボックス未選択時に、リストを非表示(項目だけ残す)にする場合はどのようにすればよいのでしょうか。お手すきの際に見ていただけますと幸いです。