【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());
});

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

フォームの構築等で使用する例です。セレクトボックスの値によって、他のinputにrequiredを追加します。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でセレクトボックスの値によって処理を実行する方法のご紹介でした！