メールフォームについてご教授願います。

質問

閲覧ありがとうございます。

タイトル通りでございまして、メールフォームについて以下の事をご教授願います。

■プルダウンの選択によってテキストボックスを表示・非表示に切り替える。

例1）
・プルダウン１を選択した場合、必須項目であるテキストボックスの出現
・プルダウン２を選択した場合、変化なし
・プルダウン３を選択した場合、同上

もしくは
例2）
・プルダウン１を選択した場合、テキストボックス1が必須項目になる
・プルダウン２を選択した場合、テキストボックス1が必須項目ではなくなる
・プルダウン３を選択した場合、同上

上記の様な状態にするには、どのようなJavaScript、HTMLを入力すればいいでしょうか？

プルダウンの条件分岐など、他のプルダウンの中身や表示されているテキストの切り替えは見つける事が出来たのですが、表示・非表示については見つけることが出来ませんでした。

画像を添付していますが、タイトルが例のプルダウン、Twitter IDが例のテキストボックスにあたります。
メールフォームプロのCGIを使用しています。

どなたか、ご存知の方いらっしゃいましたらご教授下さい！

回答No.2

cero_d · ベストアンサー

これであってる？

jqueryで出たり消えたり
<script>
$(function(){
$("#select1").change(function(){
$("#mail1").toggle();
});
})
</script>
<select id="select1">
<option value="1">出現</option>
<option value="2">隠蔽</option>
</select>
<div id="mail1">
メールアドレス*<br>
<input type="text" id="userML1" value="" />
</div>

javascriptだけで出たり消えたり
<script>
function toggle(id,value) {
if (value==1) {
document.getElementById("mail2").style.display="block";
} else {
document.getElementById("mail2").style.display="none";
}
}
</script>
<select id="select2" onchange="toggle('mail2',this.value)">
<option value="1">必須</option>
<option value="2">非必須</option>
</select>
<div id="mail2">
メールアドレス*<br>
<input type="text" id="userML2" value="" />
</div>

お礼

ご回答ありがとうございます！

結果的には、諦めず試行錯誤にて作成する事が出来ましたが、
より詳しく、二通りも教えてくださったcero_dさんをBAとさせていただきました。

jquery、JavaScript、どちらの方法でも簡潔で思い通りのものでした！

ありがとうございました！

回答No.1

神崎 渉瑠（@taloo）

>プルダウンの条件分岐など、他のプルダウンの中身や表示されているテキストの切り替えは見つける事が出来たのですが、表示・非表示については見つけることが出来ませんでした。

その方法でできませんか？
テキストの切り替えで、非表示にしたい内容から表示にしたい内容に切り替えれば良いと思います。

「文字を消す」というのは、「""（何もない文字、長さ0の文字列）に変更する」という事です。

お礼

早速のご回答ありがとうございます。

お答えいただいた事を参考に試行錯誤してみた結果どうにか作成出来ました！

ありがとうございました！