- ベストアンサー
バスと電車の条件選択フォームを作成する方法
- バスと電車の条件選択フォームを作成する方法について詳しく説明します。
- javascriptのif構文やswitch構文を使用して、2段階のラジオボタンとDIVを連動させる方法を解説します。
- ラジオボタンの選択に応じて、詳細条件が表示されるように設定します。
- hitobito555
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
なんだかお勧めしない方法ですね。 無理くり実現するなら以下のようにしてみるとか。 関数 SetSubMenu の引数が複数指定できるようにします。 onClick="SetSubMenu(value);" は、this.value なのでは？ <form action="">のaction=""は、まずいのでは？ 最初の電車orバスの要素は、インライン要素なのでブロック要素で囲んでは？ if( idname != "" ) {... idnameがあるかどうかで判断するのではなく、idnameで指定された要素があるかどうかで判断しては？ <form>要素は１つでよいのでは？ といいつつ、面倒なので修正はしませんでした。 <!DOCTYPE html> <meta charset="UTF-8"> <style type="text/css"> .second , .third{ display: none; } </style> <script> function AllHide() { document.getElementById('bus').style.display = 'none'; document.getElementById('train').style.display = 'none'; document.getElementById('bus_high').style.display = 'none'; document.getElementById('bus_normal').style.display = 'none'; document.getElementById('train_high').style.display = 'none'; document.getElementById('train_normal').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); for (var i = 0, e, I = arguments.length; i < I; i++) if (e = document.getElementById (arguments[i])) e.style.display = 'block'; } </script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(this.value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(this.value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu('bus',this.value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu('bus',this.value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu('train',this.value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu('train',this.value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div>
お礼
有難うございます。理想の結果を得るスクリプトとなりました。 ご指摘頂いた点は、自己流ですが個別に直してみます。 玄人の方には、美しくない構文・手法のようですが、素人としては結果が得られれば充分でございます。 美しい構文の方がうれしいですが、そこまでは望んでおりませんので。。。 有難うございました。