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 > とほほのスタイルシート入門