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>
お礼
難しく考えすぎていました。 凄く参考になりました。有難うございます。 何も一致しなかった場合は文章をinnerHTMLで表示させるように少し改良してみました。動作するたびにinnerHTML=""にするところが強引でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル２</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="testALL(this.form)" /> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <p id="nono"> </p> </div> <script type="text/javascript"> function testALL(f) { var div1 = document.getElementById('sample'); var div2 = div1.getElementsByTagName('div'); var str1 = f.elements["select1"].options[f.elements["select1"].selectedIndex].value; var str2 = f.elements["select2"].options[f.elements["select2"].selectedIndex].value; var str3 = f.elements["select3"].options[f.elements["select3"].selectedIndex].value; var nones = "指定なし"; var count = 0; var innerttt = "ごめんなさい<br />該当無し"; document.getElementById('nono').innerHTML = ""; for(var i=0; i<div2.length; i++){ var dd = div2[i].getElementsByTagName("dd"); if( (dd[0].textContent==str1 || dd[0].innerText==str1 || str1==nones) && (dd[1].textContent==str2 || dd[1].innerText==str2 || str2==nones) && (dd[2].textContent==str3 || dd[2].innerText==str3 || str3==nones) ){ div2[i].style.display = ''; }else{ div2[i].style.display = 'none'; count++; } } if( count == div2.length ){ document.getElementById('nono').innerHTML = innerttt; } } </script> </body> </html>