- 締切済み
ラジオボタンの選択に応じてプルダウンメニューの内容を変えたい
はじめまして。どうぞよろしくお願いいたします。 教えていただきたいのは「ラジオボタンの選択で、その下のプルダウンメニューの内容を変える方法」です。 javaスクリプトがちんぷんかんぷんですので、初心者でも分かるようご回答いただけると幸いです。 どうぞよろしくお願いいたします。
- sr400_new
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
じゃ＃１さんとは別の方法で・・・。 セレクトのところの内容を単純にまるまる 書き換えてしまうというやり方です。 いいとこもあるし、わるいところもあります。 ほかにはselectのoptionを一度けして、必要な ものをつけたしていくというやり方もありますね。 <form name="FORM1"> <input type="radio" name="radio1" value="0" id="r1" checked onclick="change(this.value)"><label for="r1">種類１</label> <input type="radio" name="radio1" value="1" id="r2" onclick="change(this.value)"><label for="r2">種類２</label><br> <span id="id1"> <select name="select1"> <option value="s1_1">種類１－１</option> <option value="s1_2">種類１－２</option> <option value="s1_3">種類１－３</option> <option value="s1_4">種類１－４</option> </select> </span> <input type=submit value="send"> </form> <script languge="javascript"> function change(num){ var obj=document.getElementById('id1'); var data=new Array(); data[0]='<select name="select1"><option value="s1_1">種類１－１<option value="s1_2">種類１－２<option value="s1_3">種類１－３<option value="s1_4">種類１－４</select>'; data[1]='<select name="select1"><option value="s2_1">種類２－１<option value="s2_2">種類２－２<option value="s2_3">種類２－３<option value="s2_4">種類２－４</select>'; obj.innerHTML=data[num]; } </script>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
こんな感じでどうでしょう？ あらかじめ用意しておいた、メニューの表示(inline)，非表示(none)をラジオボタンで切り換えます。 セレクトメニューは、１つでその内容を変更する必要があるような場合は、補足してください。 --------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> </head> <body> <form name="FORM1"> <input type="radio" name="radio1" value="kind1" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none'"><label for="r1">種類１</label> <input type="radio" name="radio1" value="kind2" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none'"><label for="r2">種類２</label><br> <select name="select1" style="display='inline'"> <option value="s1_1">種類１－１</option> <option value="s1_2">種類１－２</option> <option value="s1_3">種類１－３</option> <option value="s1_4">種類１－４</option> </select> <select name="select2" style="display='none'"> <option value="s2_1">種類２－１</option> <option value="s2_2">種類２－２</option> <option value="s2_3">種類２－３</option> <option value="s2_4">種類２－４</option> </select> </form> </body> </html>
お礼
どうもありがとうございます！ とても参考になりました！！
お礼
ありがとうございます！ また分からないことがあった際には、どうぞよろしくお願いいたします！