HOMEjQuery【jQuery】セレクトボックスの値によって処理を実行する【jQuery】セレクトボックスの値によって処理を実行する2021.09.24jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、jQueryでセレクトボックスの値によって処理を実行する方法をご紹介しています。jQueryでセレクトボックスの値によって実行する処理を作りたいんだけど、どうすればいいんだろう?上記の疑問にお答えします。jQueryを読み込む本記事では、jQueryを使用してスクリプトを作成します。jQueryのスクリプトを実行するには、予め本体ファイルを読み込む必要があります。jQueryの本体ファイル下記のscriptタグで読み込むことができます。バージョンは環境に合わせて変更してご利用ください。src="https://code.jquery.com/jquery-3.6.0.js"></script>選択されたセレクトボックスの値を取得するセレクトボックスの値を取得します。セレクトボックスの値が選択された、もしくは変更になった場合に値を取得し、ブラウザ上にアラートを表示します。下記はセレクトボックスの値を取得してアラート表示するデモです。セレクトボックスの値を選択・変更して動作をご確認いただけます。ここではアラートを表示していますが、組み込む場合は実行したい処理に置き換えてご使用ください。alert($('#pref').val());});セレクトボックスの値によってテキストフィールドを入力必須にするフォームの構築等で使用する例です。セレクトボックスの値によって、他のinputにrequiredを追加します。requiredを追加された入力欄は入力必須になります。下記はセレクトボックスの値によってテキストフィールドを入力必須にするデモです。セレクトボックスのその他が選択されると、テキストフィールドが入力必須になります。}});attr()は要素の属性を操作するメソッドです。詳細は下記のリンク先ドキュメントをご確認ください。https://api.jquery.com/attr/セレクトボックスの値によってdisabledを付加するこちらもフォームにおける使用例です。選択されたセレクトボックスの値が空であれば、送信ボタンにdisabledを追加します。選択された値が空でなければ、送信ボタンのdisabledを解除します。}});prop()は要素のプロパティを操作するメソッドです。詳細は下記のリンク先ドキュメントをご確認ください。https://api.jquery.com/prop/最後にセレクトボックスの値によって処理を実行するスクリプトは、フォームをカスタマイズする際に組み込むことが多い処理です。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。