- ベストアンサー
セレクトリンクの使い方と問題点
- セレクトリンクの使い方や問題点について説明します。
- セレクトリンクでは、選択したオプションに応じてページが切り替わりますが、表示が保持されない場合があります。
- 特定のオプションから切り替えた際にも、表示を保持する方法はありません。
- aidae12
- お礼率15% (11/71)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （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>
その他の回答 (5)
- amanojaku1
- ベストアンサー率54% (265/488)
>>（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>
- amanojaku1
- ベストアンサー率54% (265/488)
>今のこのままで飛ぶとどこにとんでもどこから飛んでも >最初の【1/3】と表示されてしまうので少々不便に思っています。 リロードされるからです。 リロードとは新たにページを読み込む事です。 >そのページ内に飛ぶ場合はJavaScriptで記述する必要があります。 訂正です、ページ内に飛ぶ場合はリロードされないようです(つまり、その状態が保たれる)。 「Chrome、Firefox、Explorer」にて確認、ただし他のブラウザでは その保障はありません。
- amanojaku1
- ベストアンサー率54% (265/488)
（1） >そのページ内に飛んでますか？ >別のページに飛んでますか？ そのページ内に飛ぶ場合はJavaScriptで記述する必要があります。 別のページに飛ぶ場合は通常のHTMLで記述するか、JavaScriptで記述するか、どちらでも可能です。 当然、通常のHTMLで記述する方が簡単です。 まあ、その前に「value=」にリンクが設定されてないので、そこから解決した方が良いでしょう。
- amanojaku1
- ベストアンサー率54% (265/488)
（1） >そのページ内に飛んでますか？ >別のページに飛んでますか？ （2） ><option value="1">1/3</option> ><option value="2">2/3</option> ><option value="3">3/3</option> 「value=」にリンクが設定されてませんが？
補足
コメント有難う御座います。 （1） >> 別のページに飛んでいます。 そこのページにも質問に描いた通りの同じものを打ってあります。 （2） >> value=1,2,3としたのは取り敢えずで 実際にはリンクを打ち込んであります。 分かりづらくて申し訳ありません。
- amanojaku1
- ベストアンサー率54% (265/488)
そのページ内に飛んでますか？ 別のページに飛んでますか？
お礼
詳しく教えて下さり有難う御座います！ 提示して頂きました通りに組み直したら上手く行きました！ JavaScriptを推奨と言う事でしたので、 此れから先はJavaScriptを積極的に入れて行きたいと思います。 本当に有難う御座いました！