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

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 を使うとタグの制御が本当に簡単にできます。

 

 

 

Twitterでフォローしよう

おすすめの記事