【jQuery】プルダウンメニューの入力値に合わせて他の項目の表示・非表示を切り替える方法

今回はjQueryを使って、プルダウンメニューの入力項目に合わせて他の項目の表示・非表示を切り替える方法を紹介します。

アニメーションなどは使用せず、できるだけシンプルな形で作ります。

 

コード

<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>

項目の表示・非表示にはjQueryのchangeイベントを使って判定し、プルダウンメニューの内容によってCSSで表示、非表示を切り替えます。

上のコードの場合、「本」にチェックが入っていた場合は「著者」を表示し、それ以外が選択されてい場合は非表示にしています。

また、「著者」の項目はdisplay: none;を指定しておくことでページの読み込み時には非表示にしています。

 

たったこれだけのコードで実装できるのでぜひやってみてください。