- ベストアンサー
JavaScriptから自ページリンクへ飛ばす方法？
行数の多い一覧で任意の行にスクロールするのが面倒で、 各行のキーになるような値の入ったドロップダウンリスト(以下DL)を設け、 それを選択して該当行を先頭に表示できないか考えています。 ●画面イメージ [A |▼] ←DL |A|データA1| |A|データA2| |B|データB1| : |Z|データZn| DLには"A"～"Z"までが格納されていて、 例えば"Y"の選択でYの行を先頭に表示できればと思います。 そようなDLと、飛び先アンカー<A>を適宜埋め込んだhtmlを作成しました。 DL選択時のonchangeのJavaScriptで選択値に該当する<A>に飛ばす、 なんてできますでしょうか。 そもそもこんな方法はムリかもと思いつつ、お知恵があればと思い質問いたしました。 どうか宜しくお願い致します。 ●html <html> <head> <SCRIPT language="Javascript"> <!-- function onChangeKeyList() { var v = document.thisForm.keyList.value; ※ vにDLで選択した値を取り出す。 これを使って<a name="..."/>に何とか飛べないか？？？ return false; } --> </SCRIPT> </head> <body> <form> <select name="keyList" onchange="onChangeKeyList();"> <option value="A">A</option> : <option value="Z">Z</option> </select> <table> <A name="A" /> ←アンカー <tr> <td>A</td><td>データA1</td> </tr> <tr> <td>A</td><td>データA2</td> </tr> <A name="B" /> ←アンカー <tr> <td>B</td><td>データB1</td> </tr> : </table> </form> </body> </html>
- ciba
- お礼率88% (40/45)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
ファイル名なしでもいけるんじゃなかったかな？ location.href="#"+v;
お礼
steel_grayさん、アドバイスをどうもありがとうございます。 実はNo.1の回答を頂いた際、この方法でも試してみたのですが、 それでもうまくいかず悩んでいたのですが、 結局僕の作成したhtml中の飛び先の指定の仕方がマズかったのだと分かりました。 その部分を直してこのファイル名を指定しない方法でlocation.hrefし、 今では無事動作するようになりました。 どうもありがとうございました。 お礼が遅くなってすみません。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
試してはいないですけど location.href="self.html#"+v; でいいんじゃないかと思います。
補足
BLUEPIXYさん、早速のアドバイスをありがとうございます。 今回の質問では、簡単のためhtmlとしましたが、 実際はtomcat+strutsの環境上のservletで用いるjspでして、 教えて頂いた location.href="self.html#"+v; のうち、"self.html"に該当する部分をどう指定すればよいのか分かりません。 ちなみにlocation.hrefの値をalertを使って表示してみると、 http://remoteServer:8080/myServlet/setupThisForm.do ※ここで remoteServer：サーブレットを構築しているサーバ名 myServlet:アプリケーションURI setupThisForm.do：thisForm.jspを構築するaction となっており、どうもこれを操作するのではないような気がしました。 documentオブジェクトを使うのかなと推測していろいろ調べていますが、まだ未解決です。 もし何かご存知でしたら、またご教授ください。 よろしくお願い致します。
お礼
BLUEPIXYさん、たびたびありがとうございます。 おかげさまで無事動作するようになりました。 実はscrollToを試してみたところ誤差が大きかったので、 どれだけ調整してやればよいか調べようとしたのですが、 その時にふと上に載せてくださったhtmlを見て気付きました。 僕のhtmlでは<tr>の前の必要な箇所に<A>を付けていたのですが、 上のサンプルでは<tr id="...">とされていますね。 この方法でうまく行くようになりました。 結局BLUEPIXYやsteel_grayに教えて頂いたNo.1やNo.2での回答に、 今回教えて頂いた<tr id="...">の組み合わせで動作しました。 テーブル中の<A>は動作しないのかな。 丁寧にサンプルを載せてくださったおかげで解決できました。 ありがとうございました。 お礼が遅くなってすみませんでした。