人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

プルダウン・メニューで選択状態を保持したいです。
下記のソースにおいてページ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>

●質問者: goodjobtou
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:サイト ソース 検索 自動
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kebo987654
●35ポイント

指定のページにあるように外部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;
})();
◎質問者からの返答

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

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


2 ● ele_dir
●35ポイント

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>

でいかがでしょうか。

◎質問者からの返答

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


3 ● kebo987654
●10ポイント

相対パスを絶対パスに変換する - 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> 以下に書いてください。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ