javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i title01 title02 title03

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

解決済

質問者：momohiyopapa
質問日時：2011/02/15 12:57
回答数：3件

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

<html>
<head>
<script type="text/javascript">
window.onLoad = function(){
document.getElementById("selected").onChange = function(){
var planTitle = this.selectedIndex;
var object = document.getElementById("derection");
var TextData = [[],["text","text"],["text","text"]];

for (var i=0; i<TextData[planTitle].length; i++){
document.write(TextData[i]);
}
}
}
</script>
</head>

<body>
<form action="">
<select id="selected">
<option value="title01">title01</option>
<option value="title02">title02</option>
<option value="title03">title03</option>
</select>
<div id="direction"></div>
<div id="direction"></div>
</form>

</body>

</html>

通報する

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

質問の本文を隠す

回答 (3件)

No.1

回答者： yambejp
回答日時：2011/02/15 13:49

とりあえず根本的な間違いはonLoad→onloadだったりonChange→onchangeだったり

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

この回答への補足

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

配列には、selectedに応じてdivタグに入るテキストを入れたいと思っています。

補足日時：2011/02/15 15:56

通報する

- 0
- 件

通報する

この回答へのお礼

なるほどなご指摘ありがとうございます。
セレクトメニューに応じて替わるセレクトメニューのソースが本に載っていたので、それを元に書き換えていたら混乱してしまっているところです。

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

通報する

お礼日時：2011/02/15 16:04

No.2

回答者： fujillin
回答日時：2011/02/16 19:46

＞連想配列にしないとダメということでしょうか？

ご提示のような配列利用の方法でももちろん可能ですが、スクリプトが表示用のテキストばかりになってしまいそうなので、配列を使用しないサンプルを…

考え方を少し変えて、あらかじめ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">
<!--

//　つづく

- 0
- 件

通報する

No.3ベストアンサー

回答者： fujillin
回答日時：2011/02/16 20:04

//　つづき

/*@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>