• 締切済み

セレクトメニューから背景色変更+アンカー

セレクトメニューからページ内のアンカーに飛ばし、 さらに飛び先のオブジェクトに背景色をつけたいんですが、 どうスクリプトを書いたら良いわかりません。。。 javascriptに関しては初心者なので・・・ お詳しい方教えていただけると大変助かります! htmlはこんな感じをイメージしてます↓ <html> <head> </head> <body> <form name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>01</option> <option>02</option> <option>03</option> </select> </label> </form> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> </body> </html>

みんなの回答

noname#84373
noname#84373
回答No.3

2です <br>連呼してはいけませんね;_;

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.2

<p> <select name="select" onChange=" if (this.value) { var a = document.getElementsByTagName('a'); var c = 0; var e; var v = this.value.split(','); var d = '#ffffff'; var m; while (e = a[c++]) { if (e.name) { if (e.name == v[0]) { e.parentNode.style.backgroundColor = v[1]; m = v[0]; } else { e.parentNode.style.backgroundColor = d; } } } if (m) location.href = '#' + m; } "> <option value="">00</option> <option value="JUMP0,#ff0000">01</option> <option value="JUMP1,#00ff00">02</option> <option value="JUMP2,#0000ff">03</option> </select> </p> <hr><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div> <a name="JUMP0">No.1</a> ~~ </div> <hr><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div> <a name="JUMP1">No.2</a> ~~ </div> <hr><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div> <a name="JUMP2">No.3</a> ~~ </div>

全文を見る
すると、全ての回答が全文表示されます。
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1
yuki2000_2
質問者

補足

アンカーだけなら分かります。 onchange="location:href='アンカー'"でいけますよね? それと背景色変更をうまく組み合わせたいのです。 webで検索しても良いサンプルがないので具体的に教えていただきたいです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • select値でのフォームのaction値の変更

    以下のようなフォームでselectの値によって PHPでactionのURLを変更させるようなことは出来るでしょうか。 <form name="form" method="GET" action="ここをselect値により変更"> <input type="text" name="word" id="word" value="" /> <select name="select" id="select"><option selected="selected" value="01">値01</option> <select name="select" id="select"><option selected="selected" value="02">値02</option> <select name="select" id="select"><option selected="selected" value="03">値03</option> </select> </form> 以上、どうぞ宜しくお願い申し上げます。

    • ベストアンサー
    • PHP
  • プルダウンのメニューを表示を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>

  • VBScriptでHTMLのForm内のselectをコントロールするには?

    javaScriptの例はたくさんあるので大よそは理解できたのですが、VBScriptでやるとうまく動きません。 document.form_name.id_name.options.length は効いているようです。 document.form_name.id_name.options[0].text document.form_name.id_name.options[0].value では値が入りません。 どうすれば動くでしょうか? ----test.html---- <script language="VBScript"> <!-- Sub change() document.term.minute.options.length = 1 document.term.minute.options[0].text = "aa" document.term.minute.options[0].value = "aa" End Sub // --> </script> <html> <head><title>test</title></head> <body> <form name="term" METHOD=POST ACTION="report.asp"> 時: <select onChange="change" name="hour"> <option>23 <option>24 </select> <BR> 分: <select name="minute"> <option>00 <option>10 <option>20 <option>30 <option>40 <option>50 </select> <input type=submit name="confirm" value="レポート"> </form> </body> </html>

  • セレクトメニューに応じた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>

  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD>

  • Smartyで、セレクトボックスが選択された時に

    いつもお世話になっています。 Smartyに関して質問します。 以下のようなtemplateがあった場合に、 <html> <head><title></title> </head> <body> <selection name="hobby"> <option name="hobby[]" value="0" >スポーツ</option> <option name="hobby[]" value="1">卓球</option> </selection> <div id ="hobby_details">ここに、選択された値により表示する内容を変える </div> </body> </html> セレクトが選択されたら、それをキーにdbに接続して値をとってき、 再度<div></div>内部に値を表示することはできないのでしょうか? その場合として、pluginクラスを作って表示することはできないのでしょうか? したいのが、セレクトボックスが選択されたときに、<div></div>内に値を表示したいのです。 宜しくお願いします。

    • ベストアンサー
    • PHP
  • 背景色変更

    現在かなり困っています・・・。 フレームでウインドウを上下で区切って上の方のウインドウ内に以下のようなプログラムをいれ、背景色を簡単に変更できるようにしたのですが、これを上のウインドウ内ではなく下のウインドウないの背景を変えたいのですがどうすればいいのでしょうか・・? つまり、上のウインドウないのリストボックスをいじることで、下の方のウインドウ内の背景色を変更したいのです。 知っている方がいらしたら教えてください。 具体的なプログラムを教えていただけたらうれしいです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> <SELECT id=select1 style="WIDTH: 100px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色変えます</OPTION> <OPTION value=red>赤</OPTION> <OPTION value=black>黒</OPTION> </SELECT></P> </BODY>

    • ベストアンサー
    • HTML
  • まったく同じ<select>フォームの値を連動させたい

    まったく同じ<select>フォームの値を連動させたい ptpで下記のようなコードがあり、まったく同じselectフォームの値を常に連動させるにはどうしたらよいでしょうか。 本当は、ひとつのform内に二つのSubmitボタンがあってはならないような話を聞いたことがありますが・・・ <html> <head> </head> <body> <?php $btn = "<select name='sorttype'>"; $btn .= "<option value='0'>氏名</option>"; $btn .= "<option value='1'>年齢</option>"; $btn .= "<option value='2'>電話番号</option>"; $btn .= "</select>"; $btn .= "<input type='submit' name='exec' value='保存'>"; ?> <form> <?= $btn ?> ああああ<br> いいいい<br> うううう<br> <?= $btn ?> </form> </body> </html>

  • セレクトメニューの4連動

    いつも参考にさせて頂いております。 javascript初心者です。 現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。 一つ目のセレクトで、地域の選択 二つ目のセレクトで、県の選択 三つ目のセレクトで、「プレイスポット」か「食事」の選択 四つ目のセレクトでは、 プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript"> <!-- var area=0; function setA(n) { aa=n; data1 = [ ["東京","神奈川"], ["大阪","神戸"], ]; len = document.form1.box_a.options.length; for(i=len-1; i>0; --i) document.form1.box_a.options[i] = null; if(n!=0) { document.form1.box_a.style.visibility = "visible"; for(i=0; i<data1[n-1].length; i++) document.form1.box_a.options[i+1] = new Option(data1[n-1][i]); } setB(0); } function setB(n) { data2 = [ [["プレイスポット","食事"],["プレイスポット","食事"]], [["プレイスポット","食事"],["プレイスポット","食事"]] ]; len = document.form1.box_b.options.length; for(i=len-1; i>0; --i) document.form1.box_b.options[i] = null; if(n==0)return; document.form1.box_b.style.visibility = "visible"; for(i=0; i<data2[aa-1][n-1].length; i++) document.form1.box_b.options[i+1] = new Option(data2[aa-1][n-1][i]); setC(0); } function setC(n) { data3 = [ [[["としまえん","よみうりランド"],["キハチ","久兵衛"]]], [[["江ノ島","鎌倉"],["カレーミュージアム","中華街"]]], [[["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]]], [[["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]]] ]; len = document.form1.box_c.options.length; for(i=len-1; i>0; --i) document.form1.box_c.options[i] = null; if(n==0)return; document.form1.box_c.style.visibility = "visible"; for(i=0; i<data3[aa-1][n-1][n-1].length; i++) document.form1.box_c.options[i+1] = new Option(data3[aa-1][n-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>

  • セレクトボックスの値で分岐処理をしたい

    こんにちは。スクリプト初心者です。 現在セレクトボックスの、インデックス値を取得し、 それによっての分岐処理をしたいと考えています。 <html><head></head> <body> <form> <select name="1"> <option>選択できます。 <option>選択肢1 <option>選択肢2 </select> </form> </body></html> とあり、これに、 option「選択1」なら、PG1プロシージャを呼ぶ 同様  「選択2」なら、PG2プロシージャを呼ぶ としたい時、どのようにコーディングすれば よいのでしょうか。 サイトで調べたものの、 JavaScriptでの インデックス値の取得がわかりません。 宜しくお願いいたします。