SELECTの選択状態を、複数のVALUE要素の一部を使ってCookie保存したい
1つの選択に複数のvalue値を持つSELECTで、
選択状態をCookieに保存しているのですが、
保存した後に、諸般の事情でSELECTに設定してあるvalueの値を変更(修正)しなければならないことがあります。
しかしそうすると、Cookieを読み込んだとき保存データとSELECTが照合出来なくなり選択状態を再現できません。
そこで、valueで持たせている数値のうち1ヶ所を連番にして、
そこだけ照合して読み込みできないかと思い立ちました。
v[1] = o.b.value.split(',')[3];
などとして、value値の一つを抜き出して保存するところまでは出来たのですが、
それをCookieから読み込んでも、複数のvalueの値の1ヶ所を選んで照合する方法がわかりません。
そもそも可能なのかもわからないのですが・・何か良い方法はないでしょうか？。
サンプルをHTML化してアップローダに置いたもの
http://kissho.xii.jp/1/src/1jyou57011.html
<HTML>
<BODY>
<form id="myform">
<BR>
セレクト1 <SELECT name="a">
<OPTION value="0,00,000,a00" selected>0</OPTION>
<OPTION value="1,11,111,a01">1</OPTION>
<OPTION value="2,22,222,a02">2</OPTION>
<OPTION value="3,33,333,a03">3</OPTION>
<OPTION value="4,44,444,a04">4</OPTION>
<OPTION value="5,55,555,a05">5</OPTION>
</SELECT> ← valueをまとめて保存。Cookieから読み込み選択状態の再現も可能。<BR>
<BR>
セレクト2 <SELECT name="b">
<OPTION value="0,00,000,b00" selected>0</OPTION>
<OPTION value="1,11,111,b01">1</OPTION>
<OPTION value="2,22,222,b02">2</OPTION>
<OPTION value="3,33,333,b03">3</OPTION>
<OPTION value="4,44,444,b04">4</OPTION>
<OPTION value="5,55,555,b05">5</OPTION>
</SELECT> ← 「,」で分離してvalue[3]のみ保存。読み込みで選択状態の再現まではできず。<BR>
<BR>
保存番号 <SELECT size="3" name="selectsave">
<OPTION value="v1" selected>保存1</OPTION>
<OPTION value="v2" >保存2</OPTION>
<OPTION value="v3" >保存3</OPTION>
</SELECT><BR>
<BR>
<INPUT type="button" value="セーブ" name="save" onclick="set_cookie()">
<INPUT type="button" value="ロード" name="lord" onclick="get_cookie()">
<input type="reset" value="リセット">
</form>
Cookieデータ表示<br><input type="text" size="50" id="sample">
<script language="JavaScript">
function set_cookie(){
o=document.getElementById('myform');
var v =[];
v[0] = o.a.value;
v[1] = o.b.value.split(',')[3]; //「,」で分離して[3]のみ保存
saveCookie( o.selectsave.value, v.join('/'),30);
document.getElementById('sample').value=v.join('/');
}
function get_cookie(){
var o=document.getElementById('myform');
var GET=loadCookie(o.selectsave.value).split('/');
document.getElementById('sample').value=loadCookie(o.selectsave.value);//sapmle
setvalue(document.getElementById('myform').a, GET[0]);
setvalue(document.getElementById('myform').b, GET[1]);
}
function setvalue(o,v){
for(i=0;i<o.length;i++) if(o[i].value==v) o[i].selected=true;
}
function saveCookie( vn, v, dy ){
if(navigator.cookieEnabled)
document.cookie = vn+ '='+ v+ ';expires='+ new Date((new Date()).getTime()+dy*24*3600000).toGMTString();
}
function loadCookie(vn){
var rt='';
if( vn && document.cookie ) {
var v = document.cookie.split(';');
for(i in v){ v[i].match(/^\s*(.*)=(.*)$/); if( RegExp.$1 == vn) { rt = RegExp.$2; break; } }
} return rt;
}
</script>
</BODY>
</HTML>
お礼
ありがとうございました。 疑問点が分かって、スッキリしました。 すいません、下記のご回答の事でもうチョット質問させてください。 質問(1) １ この文字列は、何故下の「function」の中に含めないのでしょうか？ ---> 定数として使う変数は通常functionの外に記述します。 この例ではfunctionの中でも問題ありません。 「定数として使う」という部分が、よく分かりません。 通常の変数の使い方とは、又違うのでしょうか? お手数をお掛けしますが、よろしくお願いします。