お世話になります。セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするにはどうすればいいでしょうか？ジャパンネット銀行郵貯銀行イーバンク銀行コンビニ決済クレジットカード上記のようなセレクトメニューがあり、セレクトメニューが、『コンビニ決済』、『クレジットカード』が選択されたときのみ下記の入力項目を表示させたいと思っています。。ご住所郵便番号：都道府県：市・区：町・村：番地・建物名：電話番号ハイフンなしでご入力ください。 JavaScriptを利用してやるという事は分かったのですが、JavaScript の知識がなく、どうすればいいのか分かりません。どのようにすればこの機能を実現できるでしょうか？ご教授のほどよろしくお願いします。

#1 yyr446です。詳しく条件を読んでなかったもので、私のサンプルでご要望とおりにするには、 function setform(val){ if ((val=="4,コンビニ決済,0") || (val=="5,クレジットカード,0")){ document.getElementById("hoge").style.display="block"; }else{ document.getElementById("hoge").style.display="none"; } } としておいた上で、 ---- ---- とします。こっちの方はonchangeでselectタグからハンドラーを登録しているので jsはどこにあってもよいです。 #2様の解答は、イベントハンドラーをアタッチしているので、 DOM要素をロードし終わった後にやらないといけないですね。の前とか body onload=とか window.onload function(){ } とかで...

方法はいろいろあると思いますが、一例として入力項目のにidを付けてcssで非表示にしておきます。でonchangeのイベントでjavascriptの関数を呼び出して選択されたvalueによってを表示・非表示を切り替えます。 ---------------------- （javascript） function setform(val){ if (val="1,ジャパンネット銀行,0"){ document.getElementById("hoge").style.display="block"; }else{ document.getElementById("hoge").style.display="none"; } }

セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするには？

解決済

質問者：hametome
質問日時：2009/09/30 10:52
回答数：4件

お世話になります。

セレクトメニューで選択された項目によって、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
の知識がなく、どうすればいいのか分かりません。

どのようにすればこの機能を実現できるでしょうか？ご教授のほどよろ
しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/09/30 13:37

#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>

この回答への補足

ご回答頂きまして、ありがとうございます。

お教え頂いた方法をやってみましたら、思うような動作を実現する事が出
来ました。ありがとうございます。

その上で、後学の為に一点質問させて頂きたいのですが、

<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>の間に書かないと動かな
いようなのですがこの違いはなぜ起こるのでしょう？

かなり初歩的な質問なような気もするのですが、出来ればお教え頂け
れば幸いです。

補足日時：2009/09/30 14:15

通報する

- 0
- 件

通報する

No.4

回答者： fujillin
回答日時：2009/09/30 19:11

#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);

- 0
- 件

通報する

この回答へのお礼

ご教授頂きまして、ありがとうございました＾＾

通報する

お礼日時：2009/10/01 21:10

No.3

回答者： yyr446
回答日時：2009/09/30 16:00

#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(){
}
とかで...

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/09/30 11:37

方法はいろいろあると思いますが、

一例として
入力項目の<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>

引き続きご教授頂けましたら幸いでございます。