- ベストアンサー
HTML内の指定の位置にプルダウンを読み込みたい
まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>
- ultra-goo
- お礼率100% (4/4)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょ？ <html> <head> <script type="text/javascript"> function setSelect(obj){ var f=obj.form; var n=obj.parentNode.firstChild; while(n){ if(obj.name==n.name) f[n.value].className="hide"; n=n.nextSibling; } f[obj.value].className=""; } </script> <style> .hide{ display:none; } </style> </head> <body> <form> <input type="radio" name="rdoSample" value="AAA" onClick="setSelect(this)">タイプ１<br> <input type="radio" name="rdoSample" value="BBB" onClick="setSelect(this)">タイプ２<br> <input type="radio" name="rdoSample" value="CCC" onClick="setSelect(this)">タイプ３<br> <input type="radio" name="rdoSample" value="DDD" onClick="setSelect(this)">タイプ４<br> <select name="AAA" size="1" class="hide"> <option value="1-1" selected>1-1</option> <option value="1-2">1-2</option> </select> <select name="BBB" size="1" class="hide"> <option value="2-1" selected>2-1</option> <option value="2-2">2-2</option> </select> <select name="CCC" size="1" class="hide"> <option value="3-1" selected>3-1</option> <option value="3-2">3-2</option> </select> <select name="DDD" size="1" class="hide"> <option value="4-1" selected>4-1</option> <option value="4-2">4-2</option> </select> </form> </body> </html> 見栄えに関してはクラスで調整するのがベター。 またformにnameをつけるのは非推奨。 スタイルシートもvisibilityよりはこの場合はdisplayの方がきれいかも。
その他の回答 (1)
- hisajiro
- ベストアンサー率37% (124/329)
簡単な方法は <html> <head> <title></title> <script language="JavaScript"> <!-- function setSelect(rdb) { if (rdb.value == "0") { document.form1.AAA.style.visibility = "visible"; document.form1.BBB.style.visibility = "hidden"; } else { document.form1.BBB.style.visibility = "visible"; document.form1.AAA.style.visibility = "hidden"; } } // --> </script> </head> <body> <form name="form1"> <input type="radio" name="rdoSample" value="0" onClick="setSelect(this)">タイプ１<br> <input type="radio" name="rdoSample" value="1" onClick="setSelect(this)">タイプ２<br> <select name="AAA" size="1" style="visibility:hidden"> <option value="1-1" selected>1-1</option> <option value="1-2">1-2</option> </select> <br> <select name="BBB" style="visibility:hidden"> <option value="2-1" selected>2-1</option> <option value="2-2">2-2</option> </select> </form> </body> </html> これで動きはできます。 後はこれをヒントに自分が思い描く動きになるようにがんばってください。 上記の方法は セレクトボックスAAAとBBBを初期状態でhidden（非表示）に設定しておき、 ラジオボタンが押下されたら、片方をvisible（表示）に変え、もう片方をhiddenにするだけです。 他にはセレクトボックスを一つだけ表示した状態にし、 ラジオボタンが押下されたらoptionを書き換える方法もあります。
お礼
ありがとうございます！ この方法で全く問題ないです！！ すみませんが、あと一歩教えてください。 最終的にラジオボタンとプルダウンを４つにしたいんです。 その場合はif elseでなくなると思うのですが どういう記述をすればよいでしょうか？
お礼
すごい！！完璧です！！！ ありがとうございます！