プルダウン・メニューで選択状態を保持したいです。

下記のソースにおいてページ2を選択した場合、移動先でプルダン・メニューのページ2が
自動的に選択されている様にしたいです。

検索した結果、同等な質問が外部サイトにいくつかあり何となくやり方は見えたのですが、
明確なソースを明示しての例がなくうまくいきません。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1217142677
また、このケースだと実際に設置したところうまくいきませんでした。
確実な答えがわかる方よろしくお願いします。

<form>
<select onChange="location.href=value;">
<option value="#">移動先を選択</option>
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
<option value="page3.html">ページ3</option>
</select>
</form>

回答の条件
  • 1人2回まで
  • 登録:2009/03/07 12:33:24
  • 終了:2009/03/14 12:35:02

回答(3件)

id:kebo987654 No.1

kebo987654回答回数38ベストアンサー獲得回数102009/03/07 14:46:21

ポイント35pt

指定のページにあるように外部JSを使うやりかたなら、これでどうですか。

<!--html//-->

<select onChange="if(this.selectedIndex>0)location.href=this.options[this.selectedIndex].value;" id="selection">
<option value="#">移動先を選択</option>
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
<option value="page3.html">ページ3</option>
</select>
<script type="text/javascript" src="select.js"></script>

<!--外部のselect.js//-->
(function(){
	var sel=document.getElementById("selection").options;
	if(!/\/([^\/]+\.html)$/.test(location.href))return;
	for(var i=0,s=RegExp.$1,l=sel.length;i<l;++i)
		if(s==sel[i].value)
			sel[i].selected=true;
})();
id:goodjobtou

設置してみましたが、だめでした。何ででしょう(汗)。

jsであれば外部jsでなくても構いません。

2009/03/08 06:50:27
id:ele_dir No.2

ele_dir回答回数263ベストアンサー獲得回数202009/03/07 18:15:24

ポイント35pt

page1.htmlに、

<form>

<select onChange="location.href=value;">

<option value="#">移動先を選択</option>

<option value="page1.html" selected>ページ1</option>

<option value="page2.html">ページ2</option>

<option value="page3.html">ページ3</option>

</select>

</form>


page2.htmlに、

<form>

<select onChange="location.href=value;">

<option value="#">移動先を選択</option>

<option value="page1.html">ページ1</option>

<option value="page2.html" selected>ページ2</option>

<option value="page3.html">ページ3</option>

</select>

</form>

page3.htmlに、

<form>

<select onChange="location.href=value;">

<option value="#">移動先を選択</option>

<option value="page1.html">ページ1</option>

<option value="page2.html">ページ2</option>

<option value="page3.html" selected>ページ3</option>

</select>

</form>


indexページに、

<form>

<select onChange="location.href=value;">

<option value="#">移動先を選択</option>

<option value="page1.html">ページ1</option>

<option value="page2.html">ページ2</option>

<option value="page3.html">ページ3</option>

</select>

</form>

でいかがでしょうか。

id:goodjobtou

すいません、実際はページ内の並べ替えなどに使うのと、ページ数の兼ね合いから人力はなしでお願いします(汗)。

2009/03/08 06:51:29
id:kebo987654 No.3

kebo987654回答回数38ベストアンサー獲得回数102009/03/08 10:53:17

ポイント10pt

相対パスを絶対パスに変換する - RapidShare を参考に、異なる階層のファイルも相対パスで参照できるように改良しました。

一応IE,FF,GoogleChrome,Operaで動作確認済みです。

<!--html//-->
<select onChange="if(this.selectedIndex>0)location.href=value;" id="selection">
<option value="#">移動先を選択</option>
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
<option value="page3.html">ページ3</option>
</select>
<script type="text/javascript" src="select.js"></script>

<!--select.js内//-->
function gURI(path){
	var e=document.createElement('span');
	e.innerHTML=['<a href="',path,'"></a>'].join('');
	return e.firstChild.href;
}
(function(){
	var sel=document.getElementById("selection");
	for(var i=1,s=location.href.toString(),l=sel.length;i<l;++i)
		if(s==gURI(sel[i].value)){
			sel[i].selected=true;
			break;
		}
})();

※<script type="text/javascript" src="select.js"></script> は <select~ </select> 以下に書いてください。

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません