Into the Program

【jQuery】セレクトボックス操作

Image

フォームをコーディングする際にセレクトボックスを採用することはよくあると思います。都道府県や職種、学歴等、複数の項目の中から一つのものを選択して貰いたい場面で使用します。

本記事では、jQueryを使ってセレクトボックスの項目が選択された場合の処理をいくつかご紹介したいと思います。

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

セレクトボックスの値を取得する

以下デモです。

セレクトボックスが選択された場合に値を取得します。

以下ではアラートを表示していますが、実際に使用する場合はアラート部分に行いたい処理を記述します。

Demo

HTML

<select id="area">
  <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>

JS

以下スクリプトです。

$(document).ready(function(){
  $('#area').on('change', function () {
      alert( $('#area').val() );
  });
});

テキストボックスを入力必須にする

以下デモです。

セレクトボックスの「その他」が選択されると、テキストボックスが入力必須になります。

Demo

HTML

フォームは以下を使用します。

<form action="" method="post">
  <select id="area" 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_text" type="text" name="text" placeholder="「その他」選択で必須">
  <input type="submit" name="submit">
</form>

上記のセレクトボックスは8地方に「その他」を追加したものです。

「その他」が選択された場合、ユーザにテキストを入力してもらいたいので、jQueryでテキストボックスを入力必須にする処理を記述します。

JS

スクリプトは、セレクトボックスの項目が選択されたら値を取得し、取得した値が「その他」の場合はテキストボックスにrequiredの属性を追加する処理を行っています。

$(document).ready(function(){
  $('#area').on('change', function () {
    var $selectedArea = $('#area').val();
    if ( $selectedArea == 'その他' ) {
      $('#input_text').attr('required', true);
    } else {
      $('#input_text').attr('required', false);
    }
  });
});

attrの詳細は以下で確認することができます。

attr

attrは指定した要素の属性を操作することができます。idの取得やhref、altの設定をしたりするのに使いますが、今回はrequiredを追加してテキストボックスを入力必須にしています。

要素にDisabledを付加する

以下デモです。

セレクトボックスの値の空の場合、送信ボタンをDisabledの状態にします。

選択された項目が値を持っていれば、送信ボタンのDisabledを解除します。

Demo

HTML

<select id="area">
  <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

$(document).ready(function(){
  $( '#submit' ).prop( 'disabled', true );
  $( '#area' ).on( 'change', function () {
    $selectedArea = $('#area').val();
    if( $selectedArea != '' ){
      $( '#submit' ).prop( 'disabled', false );
    } else {
      $( '#submit' ).prop( 'disabled', true );
    }
  });
});

propの詳細は以下で確認することができます。

prop

SHARE