JavaScriptを使用して、セレクトボックスの内容に合わせて、入力項目の表示・非表示の制御を行う方法。
やり方は色々ありますが、今回はアニメーションなどを利用せず、極力簡単に実装出来る方法を選択しました。
実装には jQuery の change イベントを使用し、セレクトボックスの内容に変更があった場合に、スタイルシート（css）でHTMLタグの表示・非表示の切り替えの処理を行っています。
下記のコードでは、
・タイプが「映画」の場合は、「著者」の入力ボックスを非表示
・タイプが「本」の場合は、「著者」の入力ボックスを表示
という処理を行っています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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 ＞ とほほのスタイルシート入門
はじめまして。
セレクトの状態では実装できたのですが、これをラジオボタンで選択した場合のものを作りたいのですが、なかなかうまくいきません。
ラジオボタンでもできるでしょうか？
大変お手数ですが、ご教授いただけるとありがたいです。
よろしくお願い致します。
すみません！
select[name=”access”]を
[name=”access”]:radio
に変えたらいけました。
ありがとうございました！！
大西たづこさん、コメントありがとうございます。
ご自身で解決できたとのことで良かったです！
一応ちょっと気になったので、念の為補足を。
[name=”access”]:radio
だと、うまく動かないと思われるので
[name=”access”]:checked
かと思われます。
手前味噌ですが、jQueryでのフォームの値操作を以下のページにまとめましたので、ご参考までに。
【jQuery】フォームの値（input、selectなど）の操作
当ブログが解決のお手伝いになれたようで嬉しいです。
ありがとうございました。
初めまして。
サイトを参考に実装しているのですが、下記の「本」の部分を「本」または「〇〇」のように行いたい場合は、どのようにすればよろしいのでしょうか。
お忙しいところ大変恐れ入りますが、ご教示いただければ幸いです。
4行目
「本」が選択されていたら、「著者」の tr のスタイルシートを「display: none;」（非表示）から「display: table-row」（表示）に変更
エルリックさん、はじめまして。
コメントに気づくのが遅くなってしまい、すみません！
もしかしたらもう解決されてしまったかもしれませんが、以下のようにして頂けると「本」または「〇〇」の動作が実現可能になるかと思います。
$(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');
}
});
});
※ コメント欄だとインデント（半角スペース）が反映されてませんが、実装時は適切なスペースを空けて頂ければ。
お忙しい中、お返事ありがとうございます！
まだ、解決できていなかったのでとても助かりますm(_ _)m
エルリックさん、コメントありがとうございます！
上記の方法で無事解決できるとよいのですが。
また何かあれば気軽にコメントください。