- ベストアンサー
セレクトメニューに応じたdivタグの内容
- javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。
- getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。
- 上手く動きませんので、どなたかご存知の方にご教授願えればと思います。
- momohiyopapa
- お礼率80% (4/5)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （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>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
＞連想配列にしないとダメということでしょうか？ ご提示のような配列利用の方法でももちろん可能ですが、スクリプトが表示用のテキストばかりになってしまいそうなので、配列を使用しないサンプルを… 考え方を少し変えて、あらかじめ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)
とりあえず根本的な間違いはonLoad→onloadだったりonChange→onchangeだったり タイポですね。 あとは同じidのタグが２つあったり、document.writeをつかったりはＮＧです。 配列もなにをしたいのかさっぱりわかりません。 全体的にもうちょっと書き方を工夫しないとかなりまずそうですね。
お礼
なるほどなご指摘ありがとうございます。 セレクトメニューに応じて替わるセレクトメニューのソースが本に載っていたので、それを元に書き換えていたら混乱してしまっているところです。 javascript自体あまりよくわかりませんが、配列にはセレクトメニューに応じて替わる複数のdivタグにいれるテキストをいれておき、それらをそれぞれのdivタグ内に書き出したいと思っています。 連想配列にしないとダメということでしょうか？
補足
ですよね。（汗 なるほどなご指摘ありがとうございます。最初はセレクトメニューに応じて替わるセレクトメニューのソースが本に載っていてそこからわかるところを書き換えていっていたら、混乱してきましたので、こちらで聞いてみることにしたのです。（汗 配列には、selectedに応じてdivタグに入るテキストを入れたいと思っています。
お礼
すごい!!すごいです。 こんなやりかたがあったのですね。ありがとうございます。 私も、みなさんの質問に答えられるようこれからも勉強していきます。 本当にありがとうございました。