【jQuery】select(セレクトボックス)の入力値に合わせて、入力項目の表示・非表示を切り替える


JavaScriptを使用して、セレクトボックスの内容に合わせて、入力項目の表示・非表示の制御を行う方法。
やり方は色々ありますが、今回はアニメーションなどを利用せず、極力簡単に実装出来る方法を選択しました。

実装には jQuery の change イベントを使用し、セレクトボックスの内容に変更があった場合に、スタイルシート(css)でHTMLタグの表示・非表示の切り替えの処理を行っています。

サンプルはこちら

下記のコードでは、
・タイプが「映画」の場合は、「著者」の入力ボックスを非表示
・タイプが「」の場合は、「著者」の入力ボックスを表示
という処理を行っています。

<script type="text/javascript">
$(function(){
  $('#tr_type select[name="type"]').change(function() {
    if ($('select[name="type"] option:selected').val() == 'book') $('#tr_writer').css('display','table-row');
    else $('#tr_writer').css('display','none');
  });
});
</script>
<table>
  <tr id="tr_type">
    <th>タイプ</th>
    <td>
      <select name="type">
        <option value="movie">映画
        <option value="book">本
      </select>
    </td>
  </tr>
  <tr id="tr_title">
    <th>タイトル</th>
    <td>
      <input type="text" name="title" value="" size="20" maxlength="20">
    </td>
  </tr>
  <tr id="tr_writer" style="display: none;">
    <th>著者</th>
    <td>
      <input type="text" name="writer" value="" size="20" maxlength="20">
    </td>
  </tr>
</table>

簡単に解説を

3行目
change イベントの実行

4行目
「本」が選択されていたら、「著者」の tr のスタイルシートを「display: none;」(非表示)から「display: table-row」(表示)に変更

5行目
「本」以外が選択されていたら、「著者」の tr のスタイルシートを「display: none;」(非表示)に変更

25行目
tr にスタイルシート「style=”display: none;”」を指定することで、ページ読み込み時は非表示にする

jQuery を使うとタグの制御が本当に簡単にできますね。
こんなに短いコードで実装できるとは思いませんでした。

参考サイト
・change イベントについて > change(fn) – jQuery 日本語リファレンス
・スタイルシートの display > とほほのスタイルシート入門


「【jQuery】select(セレクトボックス)の入力値に合わせて、入力項目の表示・非表示を切り替える」への7件のフィードバック

  1. はじめまして。

    セレクトの状態では実装できたのですが、これをラジオボタンで選択した場合のものを作りたいのですが、なかなかうまくいきません。

    ラジオボタンでもできるでしょうか?

    大変お手数ですが、ご教授いただけるとありがたいです。
    よろしくお願い致します。

    1. すみません!
      select[name=”access”]を
      [name=”access”]:radio

      に変えたらいけました。
      ありがとうございました!!

  2. 大西たづこさん、コメントありがとうございます。
    ご自身で解決できたとのことで良かったです!

    一応ちょっと気になったので、念の為補足を。
    [name=”access”]:radio
    だと、うまく動かないと思われるので
    [name=”access”]:checked
    かと思われます。

    手前味噌ですが、jQueryでのフォームの値操作を以下のページにまとめましたので、ご参考までに。
    【jQuery】フォームの値(input、selectなど)の操作

    当ブログが解決のお手伝いになれたようで嬉しいです。
    ありがとうございました。

  3. 初めまして。

    サイトを参考に実装しているのですが、下記の「本」の部分を「本」または「〇〇」のように行いたい場合は、どのようにすればよろしいのでしょうか。
    お忙しいところ大変恐れ入りますが、ご教示いただければ幸いです。

    4行目
    「本」が選択されていたら、「著者」の tr のスタイルシートを「display: none;」(非表示)から「display: table-row」(表示)に変更

  4. エルリックさん、はじめまして。
    コメントに気づくのが遅くなってしまい、すみません!

    もしかしたらもう解決されてしまったかもしれませんが、以下のようにして頂けると「本」または「〇〇」の動作が実現可能になるかと思います。

    $(function(){
    $('#tr_type select[name="type"]').change(function() {
    let type = $('select[name="type"] option:selected').val();
    if (type === 'book' || type === '〇〇') {
    $('#tr_writer').css('display','table-row');
    } else {
    $('#tr_writer').css('display','none');
    }
    });
    });

    ※ コメント欄だとインデント(半角スペース)が反映されてませんが、実装時は適切なスペースを空けて頂ければ。

  5. お忙しい中、お返事ありがとうございます!

    まだ、解決できていなかったのでとても助かりますm(_ _)m

    1. エルリックさん、コメントありがとうございます!
      上記の方法で無事解決できるとよいのですが。
      また何かあれば気軽にコメントください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です