ここから本文です

パラメータに応じたOPTIONをselectedの初期値にする方法

scr********さん

2012/3/2610:39:09

パラメータに応じたOPTIONをselectedの初期値にする方法

.
http://www.xxx.co.jp/yyy.htmlと言うページを用意して
そのページをパラメータを持たせて開いた場合に、
パラメータに応じたOPTIONをselectedの初期値にしたい場合は
どのような手法を用いれば宜しいのでしょうか
(例えばhttp://www.xxx.co.jp/yyy.html?point=300を開いた場合は、
value="300"をselectedにする)

<SELECT name="point">
<OPTION value="100">100ポイント</OPTION>
<OPTION value="200">200ポイント</OPTION>
<OPTION value="300">300ポイント</OPTION>
<OPTION value="400">400ポイント</OPTION>
<OPTION value="500">500ポイント</OPTION>
</SELECT>

HTMLだけでなく、JavaScriptを交えた方法でも構いません。
宜しくお願い致します。

閲覧数:
15,259
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

niikoujpさん

2012/3/2611:27:31

以下はJavaScriptを用いた例です。

selectの入っているフォームのnameをform1とすると、
selectのoptionのselectedを操作するには
document.form1.point.value=v;//値を指定
です。

またURLアドレス
http://www.xxx.co.jp/yyy.html?point=300
に指定された変数(GET変数)の変数名と値をとりだすのに、
get関数を作成しています。
参考にしてみてください。




---------------------------------------------

<body>
<form name="form1">
<SELECT name="point">
<OPTION value="100">100ポイント</OPTION>
<OPTION value="200">200ポイント</OPTION>
<OPTION value="300">300ポイント</OPTION>
<OPTION value="400">400ポイント</OPTION>
<OPTION value="500">500ポイント</OPTION>
</SELECT>

<script type="text/javascript">
//GET変数取得関数
function get(varName){
var varLimit=2;
var i;
var urlAry;
var varAry;
var workAry;

urlAry=location.href.split('?',2);
if(urlAry[1])varAry=urlAry[1].split('&',varLimit);

if(varAry){
for(i=0;i<varAry.length;i++){
workAry=varAry[i].split('=',2)
if(workAry[0]==varName)return workAry[1];
}
}
return null;
}

//GET変数を取得
var v=get("point");
//SELECTに設定
document.form1.point.value=v;
</script>

質問した人からのコメント

2012/3/26 13:21:49

動作の確認が取れました。
今回は投稿順も考慮しniikoujp様をBAに選ばせて頂きたいと思います。
ありがとうございました。

ベストアンサー以外の回答

1〜1件/1件中

2012/3/2611:28:59

function get_selected(name) {

// -- GET値を取る
var query = window.location.search.substring(1);
var params = query.split('&');
var get = {};
for(var i in params){
var p = params[i].split(/=/, 2);
get[p[0]] = p[1];
}

// -- selectのvalueと一致したとこをselectedにする
var e = document.forms[0].elements[name];
for(var i in e.options){
if(e.options[i].value == get[name]){
e.selectedIndex = i;
break;
}
}
}

--- HTML部分
<SELECT name="point">
<OPTION value="100">100ポイント</OPTION>
<OPTION value="200">200ポイント</OPTION>
<OPTION value="300">300ポイント</OPTION>
<OPTION value="400">400ポイント</OPTION>
<OPTION value="500">500ポイント</OPTION>
</SELECT>

<input type=BUTTON value='GET' onClick="get_selected('point')">

hoge.html?point=200とかでアクセス、onloadで関数を起動すれば自動でselectedになると思います。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる