HOMEJavaScript【JavaScript】セレクトボックスの値に応じて要素の表示・非表示を切り替える【JavaScript】セレクトボックスの値に応じて要素の表示・非表示を切り替える2022.06.15JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptでセレクトボックスの値に応じて要素の表示・非表示を切り替える方法をご紹介しています。お知らせ一覧等でページャーを実装していない場合に便利です。セレクトボックスから選択した項目に該当する要素だけを表示したいな。良い方法ないかな?上記の疑問にお答えします。本記事でやりたいことセレクトボックスから選択した値に応じて、要素の表示・非表示を切り替えることです。セレクトボックスから2022年を選択すると、2022年のテキストを持つ要素だけを表示し、他の要素を非表示にするといったものです。説明だけではわかりにくいですよね...。下記にデモをご用意しました。実際に操作して動作をご確認いただければと思います。セレクトボックスから年を選択すると、年に該当する要素だけが表示されるようになっています。CodePen.上記例ではセレクトボックスから選択した年数に応じて表示する要素を切り替えていますが、カテゴリー名や指定したテキストを含む要素等、条件を変更することで応用が利く内容となっています。セレクトボックスの値に応じて要素の表示・非表示を切り替える前項のデモで使用しているソースをご紹介します。false);};これでセレクトボックスの値に応じて要素の表示・非表示を切り替えることができます。最後に本記事の内容を以前投稿したような気がして過去の投稿を遡ってみたのですが、いくつかの投稿の文章がひどすぎて目も当てられない状況でした。どこかできっちり時間をとってリライトしないといけないのはわかっていますが、如何せん前ばかり見てしまう性格で...。今回ばかりはそんなことも言っていられません。いつも閲覧してくださっている方により良いコンテンツをお届けするため、年内のどこかで1ヵ月程時間をとってリライトに勤しみたいと思います!がんばります!以上、JavaScriptでセレクトボックスの値に応じて要素の表示・非表示を切り替える方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。