セレクトメニューに応じたdivタグの内容
- javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。
- getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。
- 上手く動きませんので、どなたかご存知の方にご教授願えればと思います。
- ベストアンサー
セレクトメニューに応じたdivタグの内容
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>
- 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タグに入るテキストを入れたいと思っています。
関連するQ&A
- セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について
アドバイスお願いします。 ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。 これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか？ 【HTML】 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript</title> <link rel="stylesheet" type="text/css" href="main.css" media="all"> <script type="text/javascript" src="main.js"></script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="">国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub">国を選択してください</select> </form> </body> </html> 【main.js】 window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [[ ],[ { text:"東京", value:"tokyo"}, { text:"大阪", value:"osaka"}, { text:"名古屋", value:"nagoya"} ],[ { text:"ニューヨーク", value:"ny"}, { text:"ロサンゼルス", value:"la"} ] ]; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value); } } } また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか？
- ベストアンサー
- JavaScript
- セレクトメニューの選択によって次に表示されるDivを変更したい
ここ２週間くらいずっと経験ないJSとPHPをいじってなんとか形になって来ましたが、どうしてもうまくいきません。 ものすごい初心者なので詳しく教えて頂けるとうれしいです。 【やりたい事】 (1)[県]と選択するとその県の(2)[区市町村]を選択できるセレクトメニューを表示させたい。 (1)と(2)で選んだ項目をデーターベースに保存したい。 【条件】 データーベースを購入して使用しているためID属性設定が出来ず、NAME属性設定しかできません。 【htmlソース】 <form name="sys_form"> 県を呼び出す特殊なコマンドコメント(Value=FP01～北海道)(onchange="showthis(this)"使用) <div id="FP01">北海道の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> <div id="FP02">青森県の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> ～FP47まで続く。 </form> 【JS】 function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "FP01"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "FP01"){ if(document.getElementById){ document.getElementById("FP01").style.display = "none"; } } } 上の状態で北海道は出来たのですが、47都道府県をうまく動作される方法がわかりません。 よろしければ教えて下さい。
- ベストアンサー
- JavaScript
- 連動するセレクトボックスの内容を増やしたい
お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、 ７つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>
- ベストアンサー
- JavaScript
- プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
- セレクト部品の表示内容
が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか？ <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>
- ベストアンサー
- JavaScript
- セレクトメニューの値を読み出す方法
セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript"> <!-- function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; } function writePrice() { document.write(price);//通常価格表示 document.write(mprice);//会員価格表示 } //--> </script> </head> <body> <script type="text/javascript"> <!-- var price = '20000'; //通常価格 //--> </script> <script type="text/javascript"> <!-- var mprice = price * 0.9; //会員価格 writePrice(); //--> </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- IDの取得、繰り返しに問題があるようなんですが・・・
複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で１つのフォームからならコピーできたのですが これを複数のフォームに対応させるためにforを使ってみたのですが どうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト <html> <body> <script type="text/javascript"> function answerPut(){ for(var i=1; i<=3; i++){ var answer = document.getElementById(id+i); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } } </script> （1）<select name="" id="s1" onChange="answerPut();"> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="" id="s2" onChange="answerPut();"> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う3">う2</option> </select> （3）<select name="" id="s2" onChange="answerPut();"> <option value="あ1">あ3</option> <option value="い2">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックス自動表示
以前http://okwave.jp/qa/q6872183.htmlにてご質問させていただきました。 合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。 <script type="text/javascript"> function calculate(){ var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value); var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value); var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value); var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value); if(isNaN(test1)){test1 = 0;} if(isNaN(test2)){test2 = 0;} if(isNaN(test3)){test3 = 0;} if(isNaN(test4)){test4 = 0;} document.getElementById('total').innerHTML = test1 + test2 + test3 + test4; } </script> <select name="test1" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test2" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test3" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test4" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test5" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <p id="total">0</p> がソースになります。 お分かりの方がいらっしゃいましたらご教示お願いします。
- ベストアンサー
- JavaScript
- JavaScriptの計算のNaNの判定について…
いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>
- ベストアンサー
- JavaScript
- テキスト内容の変化でイベント発生
下記のようなコードでイベントを発生したいと考えています。 キーボードによる打ち込みではなく、文章をコピー＆ペーストすることで 「firstBox2」の表示を消し、「secondBox2」を表示させたいと考えています。 ご教授お願いします。 <input id="target_input" type="text" value="" /> <select id="firstBox2"> <option value="select1">-----</option> <option value="select2">------</option> </select> <select id="secondBox2" style="display:none;"> <option value="select1">午前中</option> <option value="select2">2度目以降の利用</option> </select> <script type="text/javascript"> var timer = null; var input = document.getElementById("target_input"); var prev_val = input.value; input.addEventListener("focus", function(){ window.clearInterval(timer); timer = window.setInterval(function(){ var new_val = input.value; if(prev_val != new_val){ document.getElementById('firstBox2').style.display = "none"; document.getElementById('secondBox2').style.display = ""; }; prev_value = new_value; }, 10); }, false); input.addEventListener("blur", function(){ window.clearInterval(timer); }, false); } </script>
- 締切済み
- JavaScript
お礼
すごい!!すごいです。 こんなやりかたがあったのですね。ありがとうございます。 私も、みなさんの質問に答えられるようこれからも勉強していきます。 本当にありがとうございました。