セレクトリンクの使い方と問題点

前へ 次へ
このQ&Aのポイント
  • セレクトリンクの使い方や問題点について説明します。
  • セレクトリンクでは、選択したオプションに応じてページが切り替わりますが、表示が保持されない場合があります。
  • 特定のオプションから切り替えた際にも、表示を保持する方法はありません。
回答を見る
  • ベストアンサー

セレクトリンクについて

以下の様な内容でセレクトリンクをしています <form action=""> <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="1">1/3</option> <option value="2">2/3</option> <option value="3">3/3</option></select></form> この際に【1/3】の所から【3/3】に飛んだ時にそこの覧を 【3/3】の表示のままにしたいのですが、それはできるでしょうか？ 今のこのままで飛ぶとどこにとんでもどこから飛んでも 最初の【1/3】と表示されてしまうので少々不便に思っています。 説明が下手で申し訳御座いません。宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.6

>将来的にページ構成の変更を視野に入れるならJavaScriptで記述することを推奨します。 必ず名前は下記のとおりにして下さい。 ★とりあえず下記を「base.js」と言うファイルにコピペして下さい。 var sLPath = location.pathname.replace("\\","/"); var iLPLng = sLPath.lastIndexOf("/")+1; var sSelfName = sLPath.substring(iLPLng,sLPath.length); // // 「xyz」は適当な名前なのでなので、適当に変更して下さい(笑) function docwrite_select_xyz(selected_url){ // とりあえず順番に依存したファイル名にしています。 // 「url1.html、url2.html、url3.html」はページのアドレスです。 // (やむおえない場合は順番に依存しても良いですが)できればページは順番に依存しないファイル名の方が変更時にファイル名を変更しなくて済むので手間が少ないです。 // 配列はゼロ・スタートです。 // 下記は2次元配列です。 var a2p = [ ['url1.html','1/3'], ['url2.html','2/3'], ['url3.html','3/3'] ]; var selected_ins; document.write(''); document.write('<form>'); document.write('<select onchange="location.href=this.options[this.selectedIndex].value">'); for( i = 0; i<a2p.length; i++ ){ selected_ins = ''; if( selected_url==a2p[i][0] ){ selected_ins = ' selected'; } // alert( // "sSelfName="+sSelfName+";\n"+ // "selected_url="+selected_url+";\n"+ // "selected_ins="+selected_ins+";\n"+ // "i="+i+";\n"+ // "a2p[i][0]="+a2p[i][0]+";\n"+ // ""); document.write('<option value="'+a2p[i][0]+'"'+selected_ins+'>'+a2p[i][1]+'</option>'); } document.write('</select>'); document.write('</form>'); document.write(''); document.write(''); } ★とりあえず下記を「url1.html、url2.html、url3.html」と3つのファイルにコピペして下さい(「url1.html、url2.html、url3.html」と3つとも同じ内容です)。 <html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <!-- // 外部jsファイルは「head」内に記述しておけば、外部jsファイルが読み込まれてから次が実行される"仕様"らしい。 // ただし、無料サーバーでは外部jsファイルが読み込まれる前に次が実行されしまう事が多々あったのでイマイチ不信感は払拭できない(恐らくサーバー側の問題なのだろうけど)。 // そう言う場合は、別の無料サーバーを探して下さい。 // --> <script language=JavaScript type=Text/JavaScript src="base.js"></script> </head> <script type="text/javascript"> <!-- // 「xyz」は適当な名前なのでなので、適当に変更して下さい(笑) // 「base.js」の関数名と同じ名前にした下さい。 docwrite_select_xyz(sSelfName); // --> </script> </html>

aidae12
質問者

お礼

詳しく教えて下さり有難う御座います！ 提示して頂きました通りに組み直したら上手く行きました！ JavaScriptを推奨と言う事でしたので、 此れから先はJavaScriptを積極的に入れて行きたいと思います。 本当に有難う御座いました！

その他の回答 (5)

回答No.5

>>（1） >別のページに飛んでいます。 >そこのページにも質問に描いた通りの同じものを打ってあります。 ページ毎に変える必要があります。 この場合はリロードでは無く、普通に そのページを読み込んでいます。 1番目のページから書きます。 ページにより「selected」の位置が違う事に注意して下さい。 この書き方ではページ構成を変更する場合は面倒です、将来的にページ構成の変更を視野に入れるならJavaScriptで記述することを推奨します。 1番目のページ <form action=""> <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="1" selected>1/3</option> <option value="2">2/3</option> <option value="3">3/3</option> </select> </form> 2番目のページ <form action=""> <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="1">1/3</option> <option value="2" selected>2/3</option> <option value="3">3/3</option> </select> </form> 3番目のページ <form action=""> <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="1">1/3</option> <option value="2">2/3</option> <option value="3" selected>3/3</option> </select> </form>

回答No.4

>今のこのままで飛ぶとどこにとんでもどこから飛んでも >最初の【1/3】と表示されてしまうので少々不便に思っています。 リロードされるからです。 リロードとは新たにページを読み込む事です。 >そのページ内に飛ぶ場合はJavaScriptで記述する必要があります。 訂正です、ページ内に飛ぶ場合はリロードされないようです(つまり、その状態が保たれる)。 「Chrome、Firefox、Explorer」にて確認、ただし他のブラウザでは その保障はありません。

回答No.3

（1） >そのページ内に飛んでますか？ >別のページに飛んでますか？ そのページ内に飛ぶ場合はJavaScriptで記述する必要があります。 別のページに飛ぶ場合は通常のHTMLで記述するか、JavaScriptで記述するか、どちらでも可能です。 当然、通常のHTMLで記述する方が簡単です。 まあ、その前に「value=」にリンクが設定されてないので、そこから解決した方が良いでしょう。

回答No.2

（1） >そのページ内に飛んでますか？ >別のページに飛んでますか？ （2） ><option value="1">1/3</option> ><option value="2">2/3</option> ><option value="3">3/3</option> 「value=」にリンクが設定されてませんが？

aidae12
質問者

補足

コメント有難う御座います。 （1） >> 別のページに飛んでいます。 そこのページにも質問に描いた通りの同じものを打ってあります。 （2） >> value=1,2,3としたのは取り敢えずで 実際にはリンクを打ち込んであります。 分かりづらくて申し訳ありません。

回答No.1

そのページ内に飛んでますか？ 別のページに飛んでますか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンメニューの選択時のリンク先について

    「プルダウンメニューから選択すると、別ページにリンク」するページを 作成したいです。 以下の様に途中まではできたのですが、 「フレームを使わず、同じウインドウの別の箇所にリンク先を表示 　※プルダウンメニューはそのまま表示」 がどうしてもできません。xmlで作成している関係上、phpも使えません。 何か方法はありませんでしょうか。 <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") {window.aaa.location.href=linkLoc;} } //--> </SCRIPT> <form> <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select</OPTION> <OPTION value="">××</OPTION> <OPTION value="">●●</OPTION> </SELECT> </form>

  • フレーム

    <select onchange="location.href=this.options[this.selectedIndex].value"> <option value=""> <option value="http～">A <option value="http～">B <option value="http～">C </select> のスクロールでリンクしているページを、違うフレーム（Dとする）に表示させたいのですが、 <select onchange="location.href=this.options[this.selectedIndex].value"> <option value=""> <option value="http～"target="D">A <option value="http～"target="D">B <option value="http～"target="D">C </select> としても、現在のフレーム内にしか表示されません。 どうやればDに表示できますか？説明が下手ですいません。

  • セレクトボックスから別窓にジャンプするには

    ここまで↓はたどりつけたのですが、 <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="#">検索サイトにジャンプ <option value="http://www.yahoo.co.jp/">Yahoo <option value="http://www.google.co.jp/">Google <option value="http://www.infoseek.co.jp/">Infoseek </select> 選ぶと別窓（新しいページ）にジャンプするようにするには どこに_blank（？）を入れればいいのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • セレクトメニューでジャンプしたページを新しいWindowで表示したい

    リンク先をセレクトメニューで選んでもらって、そのページ内に開く方法は色々なJavaScriptを紹介しているページで見せていただいたのですが、同じWindowではなく、新しいWindowを開いてそこに表示したいのです。 下記は同じWindow内に開いてしまいますが、現在はこのようなカンジで使用しています。 <form> <select onChange="location=this.options[this.selectedIndex].value"> <option value="">選択して下さい <option value="test1.html">TEST-1 <option value="test2.html">TEST-2 <option value="test3.html">TEST-3 </select> </form> 宜しくお願いしますm(_ _)m

  • HTML教えて下さい！！！！

    セレクトメニューで別ウィンドウを開きたいのですが出来ません。 教えてください！！よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。

  • フォーム

    <FORM> <SELECT onchange="location=this.options[this.selectedIndex].value"> <OPTION value="">----- 一覧 -----</OPTION> <OPTION value="no1.html"target="f2">NO1</OPTION> </FORM> うまくできません　なぜでしょうか

    • ベストアンサー
    • HTML
  • 複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）

    いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 A.html、B.htmlの両方のファイルの同じ内容のセレクトメニューを 作っています。 A.htmlを起動するとメニューにA.htmlが B.htmlを起動するとメニューにB.htmlを表示したいと思っています。 いろいろな、サイトを見ると下記で問題ないように思いますが動作しません。 何か問題があるのでしょうか？ IE/Firefoxで動作させていと思っています。 <body> <FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html">B.html</OPTION> </SELECT> </FORM> </body> それでは、よろしくお願いします。

  • 複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）

    いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 A.html、B.htmlの両方のファイルの同じ内容のセレクトメニューを 作っています。 A.htmlを起動するとメニューにA.htmlが B.htmlを起動するとメニューにB.htmlを表示したいと思っています。 いろいろな、サイトを見ると下記で問題ないように思いますが動作しません。 何か問題があるのでしょうか？ IE/Firefoxで動作させていと思っています。 <html> <body> <FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html">B.html</OPTION> </SELECT> </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>

  • プルダウンメニューリンクを新しいウインドウで表示させたい

    ホームページビルダー11を使っています。プルダウンメニューからリンク先を「新しいウインドウ」で表示させるにはどのようにしたらよろしいのでしょうか。ご指導よろしくお願い致します <SCRIPT language="JavaScript"> <!--- 非表示 function quicklink(w){ if(w == "") return; document.quick.url.selectedIndex = 0; location.href =w; } //end ---> </SCRIPT> <FORM name="quick" action="./"><SELECT name="url" onchange="quicklink(this.form.url.options[this.form.url.selectedIndex].value)" size="1" tabindex="1"> <OPTION selected>■ リンク先を選んでクリック ■ </OPTION> <OPTION value="index.htm">その１</OPTION> <OPTION value="index-2.htm">その２</OPTION> <OPTION value="index-3.htm">その３</OPTION> </SELECT>←関連リンク先</FORM> <TABLE width="100%" border="1" cellpadding="0" cellspacing="0" class="hpb-subh02">

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する