プルダウンメニューで、選択項目をリンク先でも維持したい。
プルダウンメニューで、選択項目をリンク先でも維持したい。
javascriptを使用したプルダウンメニューについて質問です。
<form name="form1">
<select name="select" onChange="location=select.options[select.selectedIndex].value">
<option value="a.html#01">Ａ01</option>
<option value="a.html#02">Ａ02</option>
<option value="a.html#03">Ａ03</option>
<option>---------------</option>
<option value="b.html#01">Ｂ01</option>
<option value="b.html#02">Ｂ02</option>
<option>---------------</option>
</select>
</form>
２つのページ（a.html、b.html）上部に上記のようなプルダウンメニューを置き、それぞれ相互に行き来できるようにしました。
一応正常に動くのですが、たとえばa.htmlのプルダウンで『Ｂ01』を選択してリンク先b.htmlに飛ぶと、プルダウンの選択項目が一番上の『Ａ01』に戻ってしまっています。
b.htmlに飛んだ後も『Ｂ01』選択の状態で残したいのですが。
どのようにすればよいのでしょうか・・・
よろしくお願い致します。
投稿日時 - 2006-01-19 16:54:55
質問者が選んだベストアンサー
あまり綺麗には書けてませんが、取りあえずは動くとおもいます・・
<html>
<head>
<script>
function start(){
x=location.hash;
if(x!=""){
y=form1.select1.options;
for(i=0;i<y.length;i++){
z=y[i].value.indexOf(x,0)
if(z!=-1){
form1.select1.options[i].selected=true;
}
}
}
}
</script>
</head>
<body onload="start()">
<form name="form1">
<select name="select1" onchange="location.href=this.options[this.selectedIndex].value">
<option value="a.html#A01">Ａ01</option>
<option value="a.html#A02">Ａ02</option>
<option value="a.html#A03">Ａ03</option>
<option value="b.html#B01">Ｂ01</option>
<option value="b.html#B02">Ｂ02</option>
<option value="b.html#B03">Ｂ03</option>
</select>
</form>
<!--b.htmlでは以下のid属性の値をid="B01"などに変更する -->
<p id="A01">Ａ01</p>
<p id="A02">Ａ02</p>
<p id="A03">Ａ03</p>
</body>
</html>
投稿日時 - 2006-01-20 11:32:33
お礼
早速試してみたところ、動きました！すごいです！
No.1、No.2お二方の回答を参考に色々がんばってはみたのですが
全く出来ず困り果てていました。
本当にありがとうございます。
これからじっくり解析していきたいと思います。
投稿日時 - 2006-01-20 14:38:40
0人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（2件中 1～2件目)
考え方だけ書きます。
まず、指定されたアンカーはwindow.location.hashで取得できます。
例えば、b.html#01に飛んだ場合、b.html側では"#01"という文字列が取得できます。
そこで、bodyか何かのonLoadイベントで指定されたアンカーをチェックして、
その内容に応じてselectのvalueかselectedIndexを指定します。
試してないので自信は無いのですが、多分この方法でできると思います。
投稿日時 - 2006-01-19 21:42:34
お礼
考え方だけでも非常に参考になりました。
どうすべきなのか全くわからない状態でしたので・・・
（しかし、書けません。。）
ありがとうございました。勉強になりました。
投稿日時 - 2006-01-20 14:34:42
JavaScriptだけだと、けっこうややこしいですね。
参考URLを参考にやればできそうです。
サンプルを作ろうと思ったのですが、時間がかかりそうなので割愛しました。
あとはやってみてください。
参考URL：http://homepage2.nifty.com/BASH/WWW/JavaScript/qs.html
投稿日時 - 2006-01-19 21:26:06
お礼
Javascriptだけでコレは面倒なものだったのですね。
参考URLを拝見して、なんとなくわかりかけたのですが・・・・わからなかったです。。
でも考え方の参考になったというか、非常に勉強になりました。
ありがとうございました。
投稿日時 - 2006-01-20 14:32:02
あなたにおすすめの質問
連想キーワードから探す
- TML (132 件)
- http://ss (99 件)
- 結婚式 (93 件)
- クリスマス (82 件)
- 年賀状 (50 件)
- お盆 (45 件)
- 受験勉強 (34 件)
- 年末年始 (30 件)
- name=memory&action_index_detail=truehttp://ss (29 件)
- DBA (26 件)
- dba (26 件)
- amazon.co.jp/s/ref=nb_ss (21 件)
- コンテスト (19 件)
- 葬儀 (17 件)
- Congratulations (14 件)
- &sn1=&divpage=1&sn=off&ss (13 件)
- 上棟 (13 件)
- ウィンドウ (13 件)
- ワールドカップ (12 件)
- web拍手 (11 件)
OKWaveのオススメ
注目ピックアップ
おすすめリンク