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 ＞ とほほのスタイルシート入門
はじめまして。
セレクトの状態では実装できたのですが、これをラジオボタンで選択した場合のものを作りたいのですが、なかなかうまくいきません。
ラジオボタンでもできるでしょうか？
大変お手数ですが、ご教授いただけるとありがたいです。
よろしくお願い致します。
すみません！
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
エルリックさん、コメントありがとうございます！
上記の方法で無事解決できるとよいのですが。
また何かあれば気軽にコメントください。