こんにちは、Ryohei(@ityryohei)です!

本記事では、jQueryでセレクトボックスの値によって処理を実行する方法をご紹介しています。

jQueryでセレクトボックスの値によって実行する処理を作りたいんだけど、どうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

jQueryを読み込む

本記事では、jQueryを使用してスクリプトを作成します。jQueryのスクリプトを実行するには、予め本体ファイルを読み込む必要があります。

jQueryの本体ファイル下記のscriptタグで読み込むことができます。バージョンは環境に合わせて変更してご利用ください。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

選択されたセレクトボックスの値を取得する

セレクトボックスの値を取得します。セレクトボックスの値が選択された、もしくは変更になった場合に値を取得し、ブラウザ上にアラートを表示します。

下記はセレクトボックスの値を取得してアラート表示するデモです。セレクトボックスの値を選択・変更して動作をご確認いただけます。ここではアラートを表示していますが、組み込む場合は実行したい処理に置き換えてご使用ください。

See the Pen by ryohei (@intotheprogram) on CodePen.

HTML

<select id="pref">
    <option value="">-- 選択して下さい --</option>
    <option value="北海道">北海道</option>
    <option value="東北">東北</option>
    <option value="関東">関東</option>
    <option value="中部">中部</option>
    <option value="近畿">近畿</option>
    <option value="中国">中国</option>
    <option value="四国">四国</option>
    <option value="九州">九州</option>
</select>

jQuery

$('#pref').on('change', function (){
    alert($('#pref').val());
});

セレクトボックスの値によってテキストフィールドを入力必須にする

フォームの構築等で使用する例です。セレクトボックスの値によって、他のinputrequiredを追加します。requiredを追加された入力欄は入力必須になります。

下記はセレクトボックスの値によってテキストフィールドを入力必須にするデモです。セレクトボックスのその他が選択されると、テキストフィールドが入力必須になります。

See the Pen 1347-2 by ryohei (@intotheprogram) on CodePen.

HTML

<form action="" method="post">
    <select id="pref" required>
        <option value="">-- 選択して下さい --</option>
        <option value="北海道">北海道</option>
        <option value="東北">東北</option>
        <option value="関東">関東</option>
        <option value="中部">中部</option>
        <option value="近畿">近畿</option>
        <option value="中国">中国</option>
        <option value="四国">四国</option>
        <option value="九州">九州</option>
        <option value="その他">その他</option>
    </select>
    <input id="input" type="text" name="text" placeholder="「その他」選択で必須">
    <input type="submit" name="submit">
</form>

JS

$('#pref').on('change', function () {
    //セレクトボックスで選択された値を取得
    const selected = $('#pref').val();
    
    if ( selected === 'その他' ) {
        $('#input').attr('required', true);
    } else {
        $('#input').attr('required', false);
    }
});

attr()は要素の属性を操作するメソッドです。詳細は下記のリンク先ドキュメントをご確認ください。

https://api.jquery.com/attr/

セレクトボックスの値によってdisabledを付加する

こちらもフォームにおける使用例です。選択されたセレクトボックスの値が空であれば、送信ボタンにdisabledを追加します。選択された値が空でなければ、送信ボタンのdisabledを解除します。

See the Pen by ryohei (@intotheprogram) on CodePen.

HTML

<select id="pref">
    <option value="">-- 選択して下さい --</option>
    <option value="北海道">北海道</option>
    <option value="東北">東北</option>
    <option value="関東">関東</option>
    <option value="中部">中部</option>
    <option value="近畿">近畿</option>
    <option value="中国">中国</option>
    <option value="四国">四国</option>
    <option value="九州">九州</option>
</select>
<input id="submit" type="submit" name="submit" value="送信">

JS

//送信ボタンをdisabledに設定
$( '#submit' ).prop( 'disabled', true );

//セレクトボックスの値が変更されたら実行
$('#pref').on('change', function(){
    
    //セレクトボックスの値を取得
    const selected = $('#pref').val();
    
    //空値チェック
    if( selected !== '' ){
        $('#submit').prop('disabled', false);
    } else {
        $('#submit').prop('disabled', true);
    }
});

prop()は要素のプロパティを操作するメソッドです。詳細は下記のリンク先ドキュメントをご確認ください。

https://api.jquery.com/prop/

最後に

セレクトボックスの値によって処理を実行するスクリプトは、フォームをカスタマイズする際に組み込むことが多い処理です。値を取得して分岐するところまでのパターンは色々と応用が利きますので、ぜひ覚えていってくださいね!

以上、jQueryでセレクトボックスの値によって処理を実行する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。