- ベストアンサー
セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするには？
お世話になります。 セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするにはどうすればいいでしょうか？ <select class = "select-box" tabindex="7" name='payment_string'> <option value="1,ジャパンネット銀行,0">ジャパンネット銀行</option> <option value="2,郵貯銀行,0">郵貯銀行</option> <option value="3,イーバンク銀行,0">イーバンク銀行</option> <option value="4,コンビニ決済,0">コンビニ決済</option> <option value="5,クレジットカード,0">クレジットカード</option> </select> 上記のようなセレクトメニューがあり、セレクトメニューが、『コンビニ 決済』、『クレジットカード』が選択されたときのみ下記の入力項目を表 示させたいと思っています。。 <div class='order_form_out_side_box'> <div class='order_form_name'> <p>ご住所</p> </div> <div class='order_form_contents'> <p>郵便番号：<input type = "text" class="name-box1" accesskey="i" tabindex="11" name = "bango" onkeyup="setbango(this.value)" value ="" /> <br /> <p>都道府県：<input type = "text" class="name-box1" accesskey="j" tabindex="12" name = "ken" value ="" /></p> <br /> <p>市・区：<input type = "text" class="name-box5" accesskey="k" tabindex="13" name = "shi" value ="" /></p> <br /> <p>町・村：<input type = "text" class="name-box5" accesskey="l" tabindex="14" name = "machi" value ="" /></p> <br /> <p>番地・建物名：<input type = "text" class="name-box5" accesskey="m" tabindex="15" name = "banchitate" value ="" /></p> <br /> </div> <br class='clear' /> </div> <div class='order_form_out_side_box'> <div class='order_form_name'> <p>電話番号</p> </div> <div class='order_form_contents'><p><input type = "text" class="name-box6" accesskey="n" tabindex="16" name = "tel" value ="" /> ハイフンなしでご入力ください。</p> <br /> </div> JavaScriptを利用してやるという事は分かったのですが、JavaScript の知識がなく、どうすればいいのか分かりません。 どのようにすればこの機能を実現できるでしょうか？ご教授のほどよろ しくお願いします。
- hametome
- お礼率58% (27/46)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1様の回答とほぼ同様ですが、違うのは最初に非表示にするのもスクリプトで行っているところくらいかな。 （スクリプトがオフだと表示されなくなっちゃうので…） <html> <head></head> <body> <select class = "select-box" tabindex="7" name="payment_string" id="payment_string"> <option value="1,ジャパンネット銀行,0">ジャパンネット銀行</option> <option value="2,郵貯銀行,0">郵貯銀行</option> <option value="3,イーバンク銀行,0">イーバンク銀行</option> <option value="4,コンビニ決済,0">コンビニ決済</option> <option value="5,クレジットカード,0">クレジットカード</option> </select> <div id="form_container"> <p>ここに表示したいフォームなどの内容 </div> <script type="text/javascript"> document.getElementById('form_container').style.display = 'none'; document.getElementById('payment_string')./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/ addEventListener(/*@end @*/'change', function (evt) { var t = evt.target || evt.srcElement; var v = t.value.split(',')[0]; document.getElementById('form_container').style.display = (v==4 || v==5)?'block':'none'; }, false); </script> </body> </html>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 すでに#3様が回答してくださっていますが… とりあえず、そのまま外部スクリプトにしても動作するには、スクリプトの読み込みタグ（<script>～</script>）を</body>の直前に置くことで可能です。 ・・・・・ <script type="text/javascript" src="js/change.js"></script> </body> </html> みたいに。（srcの内容は適当に短くしてますので悪しからず。） もちろん <head>～</head> 間においても動作するようにもできますが、そのためには、スクリプト全体をonload時に実行するように修正する必要があります。（onloadイベントに追加するようにすればよい） onloadイベントに追加されるファンクションの中で、changeイベントを追加するという構造になるので、ちょいと面倒だったので#2のような回答にしてしまいました。（条件付コンパイルって、あまり好きじゃないんだもん） （グローバルな関数を作っちゃえば、それほどでもないんだけど。） とりあえず、そのまま継ぎ足しちゃうとこんな感じ？（どうもかっこ悪いなぁ） ----- jsファイル ----- window./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'load', function(){ document.getElementById('form_container').style.display = 'none'; document.getElementById('payment_string')./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/ addEventListener(/*@end @*/'change', function (evt) { var t = evt.target || evt.srcElement; var v = t.value.split(',')[0]; document.getElementById('form_container').style.display = (v==4 || v==5)?'block':'none'; }, false); }, false);
お礼
ご教授頂きまして、ありがとうございました＾＾
- yyr446
- ベストアンサー率65% (870/1330)
#1 yyr446です。 詳しく条件を読んでなかったもので、私のサンプルで ご要望とおりにするには、 <script type="text/javascript"> function setform(val){ if ((val=="4,コンビニ決済,0") || (val=="5,クレジットカード,0")){ document.getElementById("hoge").style.display="block"; }else{ document.getElementById("hoge").style.display="none"; } } </script> としておいた上で、 <select class = "select-box" tabindex="7" name='payment_string' onchange="setform(this.value)"> ---- <div id="hoge" class='order_form_out_side_box' style="display:none;"> ---- <div id="hoge" class='order_form_out_side_box' style="display:none;"> とします。 こっちの方はonchangeでselectタグからハンドラーを登録しているので jsはどこにあってもよいです。 #2様の解答は、 イベントハンドラーをアタッチしているので、 DOM要素をロードし終わった後にやらないといけないですね。 </body>の前とか body onload=とか window.onload function(){ } とかで...
- yyr446
- ベストアンサー率65% (870/1330)
方法はいろいろあると思いますが、 一例として 入力項目の<div>にidを付けてcssで非表示にしておきます。 <div class='order_form_out_side_box' id="hoge" style="display:none;"> <select>でonchangeのイベントでjavascriptの関数を呼び出して 選択されたvalueによって<div>を表示・非表示を切り替えます。 <select class="select-box" tabindex="7" name='payment_string' onchange="setform(this.value)"> ---------------------- （javascript） function setform(val){ if (val="1,ジャパンネット銀行,0"){ document.getElementById("hoge").style.display="block"; }else{ document.getElementById("hoge").style.display="none"; } }
補足
早速のご回答ありがとうございます。 ご教授頂いた方法を試してみたのですが、イマイチうまくいきません。 うまくいかない点として、 1『ジャパンネット銀行』がセレクトメニューの初期値になっていますが、『ジャパンネット銀行』から『コンビニ決済』や『クレジットカード』にするとその段階で住所の入力欄が出ますが、『コンビニ決済』や『クレジットカード』から『ジャパンネット銀行』に戻しても住所の入力欄が表示されたままになる。 2『郵貯銀行』や『イーバンク銀行』を選択したときにも住所の入力欄が出てしまう。 3住所の入力欄・電話番号の入力欄のdivに両方ともidを付けてみましたが、住所の入力欄は出ますが、電話番号の入力欄が出ない。 といったような状態です。 HTMLは下記のようになっています。 <div class='order_form_out_side_box' id='hoge' style='display:none;'> <div class='order_form_name'> <p>ご住所</p> </div> <div class='order_form_contents'> <p>郵便番号：<input type = "text" class="name-box1" accesskey="i" tabindex="11" name = "bango" onkeyup="setbango(this.value)" value ="" /></p> <br /> <p>都道府県：<input type = "text" class="name-box1" accesskey="j" tabindex="12" name = "ken" value ="" /> </p> <br /> <p>市・区：<input type = "text" class="name-box5" accesskey="k" tabindex="13" name = "shi" value ="" /> </p> <br /> <p>町・村：<input type = "text" class="name-box5" accesskey="l" tabindex="14" name = "machi" value ="" /> </p> <br /> <p>番地・建物名：<input type = "text" class="name-box5" accesskey="m" tabindex="15" name = "banchitate" value ="" /></p> <br /> </div> <br class='clear' /> </div> <div class='order_form_out_side_box' id='hoge' style='display:none;'> <div class='order_form_name'> <p>電話番号</p> </div> <div class='order_form_contents'> <p><input type = "text" class="name-box6" accesskey="n" tabindex="16" name = "tel" value ="" /> ハイフンなしでご入力ください。</p> <br /> </div> <br class='clear' /> </div> 引き続きご教授頂けましたら幸いでございます。
補足
ご回答頂きまして、ありがとうございます。 お教え頂いた方法をやってみましたら、思うような動作を実現する事が出 来ました。ありがとうございます。 その上で、後学の為に一点質問させて頂きたいのですが、 <script type="text/javascript"> document.getElementById('form_container').style.display = 'none'; document.getElementById('payment_string')./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/ addEventListener(/*@end @*/'change', function (evt) { var t = evt.target || evt.srcElement; var v = t.value.split(',')[0]; document.getElementById('form_container').style.display = (v==4 || v==5)?'block':'none'; }, false); </script> の部分を外部JSファイル『change.js』として保存し、<head>～</head> の間に <script type="text/javascript" src="http://www.hoge.com/change.js"></script> として見たら動きませんでした。ロールオーバーのjsファイルなどは、 <head>～</head>の間に上記のような感じで外部ファイルを指定して いるのですが、今回の場合は<body>～</body>の間に書かないと動かな いようなのですがこの違いはなぜ起こるのでしょう？ かなり初歩的な質問なような気もするのですが、出来ればお教え頂け れば幸いです。