- 締切済み
javascriptで可能ですか？
javascript初心者です。 以下の様なものは実装可能でしょうか？ セレクトメニューで選択→inputボタンクリック→3つのレイヤーを1枚ずつチェンジ。みないな感じです。 「表示切り替え」ボタンをいれたいのですが、そこがよくわかりません。。。 お分かりになる方がいらしたら 教えていただけると助かります！ 一応htmlはこんな感じで・・・ <html> <body> <form action="" method="get"> <select name="test"> <option value="1">AAAAAAAA</option> <option value="2">BBBBBBBBB</option> <option value="3">CCCCCCCC</option> </select><br> <input name="" type="button" value="表示切り替え"> </form> <div id="a" style="background-color:#FF0000">AAAAAAAAAAAAA</div> <div id="b" style="background-color:#0000FF">BBBBBBBBBBBBB</div> <div id="c" style="background-color:#00FF00">CCCCCCCCCCCCCC</div> </body> </html>
- erriri40
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
＞いちいち「表示切り替え」を押す ああ、なるほど、そのほうが理にかなってますね。 ではselectにidをふってこんな感じで？ <style> p{margin:0px;} #a{background-color:#FF0000;} #b{background-color:#0000FF;} #c{background-color:#00FF00;} .hide{display:none;} </style> <script> function viewChange(){ var obj=document.getElementById("test"); var n=obj.options[obj.selectedIndex].value; var list={1:"a",2:"b",3:"c"}; for(var i in list){ document.getElementById(list[i]).className="hide"; } document.getElementById(list[n]).className=""; } </script> <form> <p> <select name="test" id="test"> <option value="1">AAAAAAAA</option> <option value="2">BBBBBBBBB</option> <option value="3">CCCCCCCC</option> </select> </p> <p> <input name="" type="button" value="表示切り替え" onclick="viewChange()" /> </p> </form> <div id="a">AAAAAAAAAAAAA</div> <div id="b" class="hide">BBBBBBBBBBBBB</div> <div id="c" class="hide">CCCCCCCCCCCCCC</div>
- yambejp
- ベストアンサー率51% (3827/7415)
表示系はcssに統合した方がのちのち楽です。 とりあえずこんな感じでどうでしょ？ <style> p{margin:0px;} #a{background-color:#FF0000;} #b{background-color:#0000FF;} #c{background-color:#00FF00;} .hide{display:none;} </style> <script> function viewChange(n){ var list={1:"a",2:"b",3:"c"}; for(var i in list){ document.getElementById(list[i]).className="hide"; } document.getElementById(list[n]).className=""; } function rotateSelect(obj){ var max = obj.length; var idx = obj.selectedIndex; obj.selectedIndex=(max<=idx+1)?0:idx+1; obj.onchange(); } </script> <form> <p> <select name="test" onchange="viewChange(this.value)"> <option value="1">AAAAAAAA</option> <option value="2">BBBBBBBBB</option> <option value="3">CCCCCCCC</option> </select> </p> <p> <input name="" type="button" value="表示切り替え" onclick="rotateSelect(this.form.elements['test'])" /> </p> </form> <div id="a">AAAAAAAAAAAAA</div> <div id="b" class="hide">BBBBBBBBBBBBB</div> <div id="c" class="hide">CCCCCCCCCCCCCC</div>
- askaaska
- ベストアンサー率35% (1455/4149)
んと こいういこと？ value="1"が選択されているときはid="a"レイヤのみを表示 value="2"が選択されているときはid="b"レイヤのみを表示 value="3"が選択されているときはid="c"レイヤのみを表示 JavaScriptで普通にできるわよ。 inputボタンのonclickで document.getElementById("a").style.display = 'none'; と呼び出せばid="a"が消えるし document.getElementById("a").style.display = 'block'; と呼び出せばid="a"が表示されるわ。 あとは組み合わせよね。
補足
ご回答ありがとうございます！ おっしゃる通りなのですが・・・ 全くの初心者なので組み合わせ方が分かりません。 もう少し詳しく教えていただけると助かります。
補足
すみません。説明足らずで・・・ セレクトメニューと連動ではなくて、 Aをセレクトして「表示切り替え」クリックでAレイヤー表示。 という感じで。いちいち「表示切り替え」を押すイメージです。