- 締切済み
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"が表示されるわ。 あとは組み合わせよね。
補足
ご回答ありがとうございます！ おっしゃる通りなのですが・・・ 全くの初心者なので組み合わせ方が分かりません。 もう少し詳しく教えていただけると助かります。
関連するQ&A
- javascriptでコメントアウトができません
下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンのコントロールに関して
プルダウンのコントロールに関して 教えて下さい。 今、以下のようなソースを記述し、プルダウン選択で"休み"が選択された場合のみ。 テキスト入力欄を表示させるような仕組みを作成しました。 但し、この場合、Cookie等を使ってデフォルトで前回値を"休み"と選択した場合は 他のものを選択し、さらにもう１度"休み"を選択しないと表示されないかと思われます。 上記のように前回値で立ち上げた際に、既に"休み"が選択された場合でも、切り替えを 行う事なくテキスト入力欄を表示させるような事は可能なのでしょうか？？？ わかりにくい内容で申し訳ありません。 よろしくお願いします。 <script type="text/javascript"> function ChangeSelection(form, selection) { var text_note = form.elements["text_note"]; if (selection.value=="休み" || selection.value=="出張") { text_note.style.display = "block"; }else{ text_note.style.display = "none"; } } </script> </head> <body> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%;display:none;" VALUE="$out_goto"></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </body> </html>
- ベストアンサー
- JavaScript
- テキストのデフォルト非表示に関して
テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>
- ベストアンサー
- JavaScript
- テキストエリアの入力に関して
テキストエリアの入力に関して 教えて下さい。 部分的な抜粋で申し訳ありませんが、以下のようにテキストエリアをダブルクリックで 時間を表示させるような"javascript"を記述しましたが、その際に、テキストにカーソル を合わせても、そもそもの入力できなくなってしまいました。 エリアは表示されるものの、カーソルを合わせても入力モードに変わらない。。 《内容》 print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='2.5'><B>【備 考】</B></FONT></TD>\n"); print("<TD colspan='2'>\n"); print("<div id='target'>\n"); print("<select onchange='test(1)' onblur='test(1)'> <option value=' ' style='background-color:#3366FF; color:#FFFFFF'> <option value=' ～ ０９:３０' style='background-color:#FFFFFF; color:#3366FF'>～ ０９:３０ <option value=' ～ １０:００' style='background-color:#3366FF; color:#FFFFFF'>～ １０:００ <option value=' ～ １０:３０' style='background-color:#FFFFFF; color:#3366FF'>～ １０:３０ <option value=' ～ １１:００' style='background-color:#3366FF; color:#FFFFFF'>～ １１:００ <option value=' ～ １１:３０' style='background-color:#FFFFFF; color:#3366FF'>～ １１:３０ <option value=' ～ １２:００' style='background-color:#3366FF; color:#FFFFFF'>～ １２:００ </select>\n"); print("<input size='20' type='text' name='pm_note' id='pm_note' value='$out_time' ondblClick='test(0)' style='width:100%;'> \n"); print("</div>\n"); print("</TD>\n"); print("<TD></TD>\n"); print("<TD></TD>\n"); print("</TR>\n");
- ベストアンサー
- HTML
- JavaScriptで項目入力の制限分岐の仕方
WEBアンケートフォームを作る際、JavaScriptで項目入力の制限分岐の仕方を教えてください WEBアンケートフォームを作ろうとしているのですが、条件がいくつかありうまく作れません。 どなたかこの様な条件分岐でうまくいく方法をご存知の方、あるいは例がのっているWEBチュートリアルのページをご存知の方いらっしゃいませんか？ 【以下、作りたいフォームの項目】 選択肢Ａ～Ｅ（ラジオボタンによる選択）とプルダウンメニュー、テキストボックス入力フィールドがある。 --------------- Ａ プルダウンメニュー Ｂ Ｃ Ｄ Ｅ テキストボックス --------------- テキストボックスはグレーアウトでデフォルトは入力不可になっている。 プルダウンメニューもデフォルトでは選択ができないようになっている。 Ａを選んだらプルダウンメニューが選択可。 Ｃ、Ｄ、Ｅを選んだら、テキストボックスが入力可能になる。 ■■■ いろいろOK Wave内を調べたり、ググって調べて以下のようなソースを書いてみたのですが、 FireFoxやGoogleCromeだとうまく動きません。 これを動かせるようにしていただいても、助かります。 <input type="radio" name="radio1" value="ＡＡＡ" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r1">ＡＡＡ</label><select name="select1" style="display='inline'"><option value="" selected> ------------- </option><option value="１１１">１１１</option><option value="２２２">２２２</option><option value="３３３">３３３</option><option value="４４４">４４４</option><option value="５５５">５５５</option><option value="６６６">６６６</option><option value="７７７">７７７</option><option value="８８８">８８８</option><option value="９９９">９９９</option></select><br /><input type="radio" name="radio1" value="ＢＢＢ" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r2">ＢＢＢ</label><input name="select2" style="display='none'"><br /><input type="radio" name="radio1" value="ＣＣＣ" id="r3" onclick="this.form.select3.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r3">ＣＣＣ</label><input name="select3" style="display='none'"><br /><input type="radio" name="radio1" value="ＤＤＤ" id="r4" onclick="this.form.select4.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select5.style.display='none'"><label for="r4">ＤＤＤ</label><input name="select4" style="display='none'"><br /><input type="radio" name="radio1" value="ＥＥＥ" id="r5" onclick="this.form.select5.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none'"><label for="r5">ＥＥＥ</label><input name="select5" style="display='none'"> ■■■ よろしくお願いします。
- 締切済み
- JavaScript
- javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。
- ベストアンサー
- JavaScript
- javascriptについて
Javascriptを使用して簡単なツールを作りたいのですが、初心者なので分からず困っています。詳しく教えて頂けると助かります！ 現状このような感じで、機能していない状態です。ここにjavascriptで、プルダウンで選択したものによって表示する内容を変えるためにはどのような文にしたら良いのでしょうか？ 例えば、プルダウンで【卵】【焼く】を選択した時には、【目玉焼き】 【ゆでる】に変えると、【ゆで卵】といったように、組み合わせこどに表示される内容を変えたいです。 また、検索ボタンやリセットボタンを連動させたいです。検索ボタンを押すと結果が余っているスペースに表示されるようにしたいです。色々と申し訳ありませんが、教えて頂けると助かります！ <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> </head> <body> <h1>見出し</h1> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="材料"> <option value="1">卵</option> <option value="2" selected>じゃがいも</option> <option value="3">にんじん</option> </select> </form><br> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="調理"> <option value="1">焼く</option> <option value="2" selected>ゆでる</option> <option value="3">蒸す</option> </select> </form> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <input type=" submit" name="search" value=" 検索" /> <input type="reset" value="リセット"> </form> </body> </html>
- 締切済み
- JavaScript
- はじめまして、javascriptがよくわからないので助けてください。
はじめまして、javascriptがよくわからないので助けてください。 パスワードを入力し、ボタンを押すと次の画面にいけるのに加えてEnterキーを押しても遷移する様にしたいのですが、いまいちやり方がわかりません。 function enter()というを使うというところまでは理解しましたが使い方がわかりません。 下記、ソースになります。 どなたかアドバイス下さい。 <html> <head> <title>Login Page</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body> <?php if ($error_message) { print '<font color="red">'.$error_message.'</font>'; } ?> <form action="index.php" method="POST"> Login ID: <br> <select name="user_name"> <option value="123">123</option> </select> <br> <br> Password:<br> <input type="password" name="password" value"" /><br /> <br> <input type="submit" name="login" value="Login" /> </form> </body> </html>
- 締切済み
- PHP
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- ラジオボタンのバックグランドカラーについて。
いつもお世話になっております。 Livedoor にて BBS を開設している者です。 BBS のデザイン上下記の様にしています。 <body> <INPUT style="BACKGROUND: #ff0000" type="radio" name="etc1" value="#ff0000" checked> <INPUT style="BACKGROUND: #00ff00" type="radio" name="etc1" value="#00ff00"> <INPUT style="BACKGROUND: #0000ff" type="radio" name="etc1" value="#0000ff"> </body> ところが、MAC IE 5.1 では上手く表示されないみたいです。 ボーダーカラーを変えてみたらと教えてもっらたのですが、 どの様にしたら良いのかわかりません。 HLMT 初心者ですよしくお願い致します。
- ベストアンサー
- HTML
補足
すみません。説明足らずで・・・ セレクトメニューと連動ではなくて、 Aをセレクトして「表示切り替え」クリックでAレイヤー表示。 という感じで。いちいち「表示切り替え」を押すイメージです。