セレクトメニューの値をクッキーに読み書きさせるには？

3つあるセレクトメニューにYesとNoどちらかを選択させて、
3つともYesなら○どれか一つでもNoがあれば×を表示させるようなものを作り、
その結果をクッキーに保存できたらと思っていますがなかなかうまくいきません。

クッキーの保存や読込の基本、
$.cookie("cookie_name", "VALUE", { expires: 365 });
これはよく見かけるのですが、なかなか回答までたどり着けません。

お知恵を拝借したく、よろしくお願いします。

質問者からの補足コメント

• 

  よく解からないのであきらめモードです。

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/09/05 20:10

• 

  <form name="myForm">
  <select name="seisaku1" onchange="inputValue2()">
  <option value="no">No</option>
  <option value="yes">Yes</option>
  </select>
  <select name="seisaku2" onchange="inputValue2()">
  <option value="no">No</option>
  <option value="yes">Yes</option>
  </select>
  <select name="seisaku3" onchange="inputValue2()">
  <option value="no">No</option>
  <option value="yes">Yes</option>
  </select>
  </form>

    補足日時：2016/09/06 16:28

• 

  function inputValue2() {
  var index1 = document.myForm.seisaku1.selectedIndex;
  var index2 = document.myForm.seisaku2.selectedIndex;
  var index3 = document.myForm.seisaku3.selectedIndex;
  var sample1 = index1+index2+index3;
  switch (sample1) {
  case 0:
  case 1:
  case 2:
  document.myForm.myBody.value = "○";
  break;
  case 3:
  document.myForm.myBody.value = "×";
  break;
  }
  savecookie();
  }

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/09/06 16:29

• 

  function savecookie() {
  var index1 = document.myForm.seisaku1.value + c_split;
  var index2 = document.myForm.seisaku2.value + c_split;
  var index3 = document.myForm.seisaku3.value + c_split;
  var sample2 = index1+index2+index3;
  $.cookie("name", sample2 , { expires: 365 });
  alert($.cookie( "name" ));
  }

    補足日時：2016/09/06 16:31

• 

  function loadcookie() {
  $.cookie( "name" );
  c_data = $.cookie( "name" );
  data = c_data.split(c_split);
  alert(data[0]);
  alert(data[1]);
  alert(data[2]);
  
  document.myForm.seisaku1.data[0].selected;
  document.myForm.seisaku2.data[1].selected;
  document.myForm.seisaku3.data[2].selected;
  }
  
  こんな風に考えてみたんですがクッキーの値を参照してセレクトメニューの項目を維持することはできますでしょうか？
  
  よろしくお願いします。

    補足日時：2016/09/06 16:35

• 

  jqueryでやれればと思ってます。

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/09/06 17:25

No.4 ベストアンサー 回答者： yambejp 回答日時： 2016/09/06 18:09

jQueryの書き方は#2で提示していますが、今回追加で書かれたsampleを活かすと

こんな感じでしょうか

<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
loadcookie();
inputValue2();
$('[name^=seisaku]').change(function(){
inputValue2();
savecookie();
});
});

function inputValue2(){
var sample1="";
$('[name^=seisaku]').each(function(e){
sample1+=$(this).val();
});
$('[name=myBody]').val(sample1=="yesyesyes"?"o":"x");
}
function savecookie() {
var sample2="";
$('[name^=seisaku]').each(function(e){
sample2+=$(this).val();
});
$.cookie("name", sample2 , { expires: 365 });
}
function loadcookie() {
var reg=new RegExp("^(yes|no)(yes|no)(yes|no)$");
if(r=($.cookie("name")||"").match(reg)){
for(var i=1;i<=3;i++){
$('[name=seisaku'+i+']').val(r[i]);
}
}
}
</script>
<form>
<select name="seisaku1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<select name="seisaku2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<select name="seisaku3">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<input type="text" name="myBody">
</form>

この回答へのお礼

jQueryの書き方は、難しいですね＞＜；
解読ができません。

ですが少しずつやっていこうかと思います。
ありがとうございました。

お礼日時：2016/09/06 19:43

No.3 回答者： yambejp 回答日時： 2016/09/06 17:15

jqueryでやりたいのやりたくないの？

$.cookie()はjqueryのcookieライブラリを利用しているので
jqueryをつかわないならその書式は無理ですよ

No.2 回答者： yambejp 回答日時： 2016/09/05 20:47

とりあえずサンプル

<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
viewHoge();
$('select[name^="s"').change(function(){
var s=[$('[name=s1]').val(),$('[name=s2]').val(),$('[name=s3]').val()];
$.cookie("s1",s[0]);
$.cookie("s2",s[1]);
$.cookie("s3",s[2]);
viewHoge();
});
});
function viewHoge(){
var s=[$.cookie("s1"),$.cookie("s2"),$.cookie("s3")];
if (s[0]=="y" && s[1]=="y" && s[2]=="y"){
$('#hoge').html("◯");
}else if((s[0]=="y" || s[0]=="n") && (s[1]=="y" || s[1]=="n") &&(s[2]=="y" || s[2]=="n") ){
$('#hoge').html("?");
}else{
$('#hoge').html("");
}
for(var i=0;i<3;i++){
$('select[name=s'+(i+1)+']').val(s[i]);
}
}
</script>
<select name="s1">
<option value="">---</option>
<option value="y">YES</option>
<option value="n">NO</option>
</select>
<select name="s2">
<option value="">---</option>
<option value="y">YES</option>
<option value="n">NO</option>
</select>
<select name="s3">
<option value="">---</option>
<option value="y">YES</option>
<option value="n">NO</option>
</select>
<div id="hoge"></div>

No.1 回答者： yambejp 回答日時： 2016/09/05 09:44

＞その結果をクッキーに保存

選ばれた状態を保存しておきたいのか？
選ばれた結果を保存しておきたいのか？
どちらでしょう

前者なら、各セレクトボックスのselectedIndexを保持すればよいし
後者なら、セレクトボックスがどんな状態でも結果だけ保持しておけばいいでしょう

ちなみにjQueryでcookieなのでjquery.cookie.jsを読み込んでおいてください

この回答へのお礼

ありがとうございました。

お礼日時：2016/09/05 20:12