セレクトメニューに応じたdivタグの内容

2011/02/15 12:57

このQ&Aのポイント

javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。
getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。
上手く動きませんので、どなたかご存知の方にご教授願えればと思います。

momohiyopapa
お礼率80% (4/5)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/02/16 20:04 回答No.3

//　つづき /*@cc_on@*/ var changer = function(evt){ 　var sel = evt./*@if(1)srcElement @else@*/target /*@end@*/; 　changer.set(sel.value); } changer.set = function(val){ 　if(!val) return; 　var pa, ch, i, target = this.target; 　var reg = new RegExp("\\b" + val + "\\b"); 　for(i=0; i<target.length; i++){ 　　if(!(pa=document.getElementById(target[i]))) continue; 　　ch = pa.firstChild; 　　while(ch){ 　　　if(ch.nodeType==1) ch.style.display = reg.test(ch.className)?"":"none"; 　　　ch = ch.nextSibling; 　　} 　} } changer.init = function(id, ids){ 　var sel = document.getElementById(id); 　if(!sel || sel.nodeName != "SELECT") return; 　this.target = ids.split(","); 　this.set(sel.value); 　sel. /*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'change', changer, false); sel = null; } // 引数1：select要素のid // 引数2：選択表示する対象となる要素(ラッパー)のid(カンマ連結） changer.init("select1", "fuga,hoge"); //--> </script> </body> </html>

質問者

お礼 2011/02/17 09:24

すごい!!すごいです。こんなやりかたがあったのですね。ありがとうございます。私も、みなさんの質問に答えられるようこれからも勉強していきます。本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2011/02/16 19:46 回答No.2

＞連想配列にしないとダメということでしょうか？ご提示のような配列利用の方法でももちろん可能ですが、スクリプトが表示用のテキストばかりになってしまいそうなので、配列を使用しないサンプルを… 考え方を少し変えて、あらかじめHTML内にマークアップしておいた要素を、選択状態に応じて表示/非表示するというものです。（これだと普通にマークアップしておけるので、便利かもと・・・）指定は、　changer.init(select要素のid, 選択表示対象要素の親id); みたいな感じ。 * 指定範囲内の子要素のうち、選択されたoptionのvalue値のクラスを有するものだけが表示されます。 * 表示/非表示とする対象は子要素のみで、孫要素以下は対象にしていません。 * 必ず表示しておきたいものは、サンプルのように直接のテキストにするか、または!importantで表示するようにしておけば良いかと思います。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #fuga, #hoge { padding:10px; margin:10px; border:1px solid #888; } div.box { font-weight:bold; background-color:#ffd; } .force { display:block !important; } </style> </head> <body> <form name="form1" action="" method=""> <select name="select1" id="select1"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> </form> <div id="hoge"> [hoge] <div class="title01">hoge内のtitle01用の表示</div> <div class="title02">hoge内のtitle02用の表示</div> <div class="title03">hoge内のtitle03用の表示</div> <div class="force"><p>これはいつも表示される</div> </div> <div id="fuga"> <div class="force">[fuga]</div> この後のリンクが <a class="title01" href="title01.html">リンク01</a> <a class="title02" href="title02.html">リンク02</a> <a class="title03" href="title03.html">リンク03</a> 変わる。 <div class="box title01">リンクはtitle01です</div> <div class="box title02">title02だよ</div> <div class="box title03">リンク表示はtitle03でありんす</div> </div> <script type="text/javascript"> <!-- //　つづく

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2011/02/15 13:49 回答No.1

とりあえず根本的な間違いはonLoad→onloadだったりonChange→onchangeだったりタイポですね。あとは同じidのタグが２つあったり、document.writeをつかったりはＮＧです。配列もなにをしたいのかさっぱりわかりません。全体的にもうちょっと書き方を工夫しないとかなりまずそうですね。

質問者

お礼 2011/02/15 16:04

なるほどなご指摘ありがとうございます。セレクトメニューに応じて替わるセレクトメニューのソースが本に載っていたので、それを元に書き換えていたら混乱してしまっているところです。 javascript自体あまりよくわかりませんが、配列にはセレクトメニューに応じて替わる複数のdivタグにいれるテキストをいれておき、それらをそれぞれのdivタグ内に書き出したいと思っています。連想配列にしないとダメということでしょうか？

質問者

補足 2011/02/15 15:56

ですよね。（汗なるほどなご指摘ありがとうございます。最初はセレクトメニューに応じて替わるセレクトメニューのソースが本に載っていてそこからわかるところを書き換えていっていたら、混乱してきましたので、こちらで聞いてみることにしたのです。（汗配列には、selectedに応じてdivタグに入るテキストを入れたいと思っています。

ログインすると、全ての回答が全文表示されます。

セレクトメニューに応じたdivタグの内容

セレクトメニューに応じたdivタグの内容