- 締切済み
cookieでcheckbox項目の追加と削除とソート表示
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/tbl.htm を参考に下記のようにcheckboxを付け加えました。 <script type="text/javascript"><!-- function tblfilter(nm,key){ if(!document.getElementsByTagName) return; var trs = document.getElementById(nm).rows; for(var i=0; i<trs.length; i++){ var li = trs[i]; if(!li.title || li.title=='') continue; var found=0; if(key == '') found=1; else { var keys = li.title.split(','); for(var j=0; j<keys.length; j++){ if(keys[j] == key){ found=1; break; } } } li.style.display = found?'':'none'; } } // --></script> </HEAD> <BODY> <FORM onsubmit="return false;"> <SELECT onchange="tblfilter('ex1',this.options[this.selectedIndex].value);"> <OPTION value="" selected>すべて</OPTION> <OPTION value=海>海の動物</OPTION> <OPTION value=陸>陸の動物</OPTION> <OPTION value=お気に入り>お気に入り</OPTION> </SELECT></FORM> <TABLE id=ex1> <TR title=海><TD><input type=checkbox value=1 title='追加'>1</TD><TD>いか</TD></TR> <TR title=陸,鳴く><TD><input type=checkbox value=2 title='追加'>2</TD><TD>いぬ</TD></TR> <TR title=海,鳴く><TD><input type=checkbox value=6 title='追加'>6</TD><TD>とど</TD></TR> </TABLE> </BODY></HTML> そして http://mugi.cc/js/030520.htm 上記のURLのようにcheckしたのをJavaScriptで保存し、 最終的にはselectからお気に入りを選んだ際、 checkしたものだけ表示するようにしたいと考えております。 お手数ですが、どなた様かご教授願いますようお願い致します。
- taku0
- お礼率80% (160/199)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- STICKY2006
- ベストアンサー率29% (1536/5269)
えーと。まず、このプログラムが何をしているかは理解できてますよね？（まぁ、リンク先で解説してますし。 とりあえず、自分でJavaScriptがまったく理解できない状態でしたら、あきらめるかプログラムを書いてくれる親切な方を待ちましょう。 ちなみに自分は不親切です（笑 まず、どのようにしたいかで変わります。 >>上記のURLのようにcheckしたのをJavaScriptで保存し、 のタイミングが問題ですが、同じページ内で、チェックボックス、リストボックスを設置し、チェックボックスの内容をそのまますぐにリストボックスのお気に入りに反映させるのと、チェックボックスとリストボックスのページを別々にし、チェックボックスを選択させて、次のページに移動させ、リストボックスのお気に入りに反映させる。のではやり方が異なります。 まぁ、実現の流れ自体はあんまし変わらないかな。。。 ・リストボックスの全てにお気に入りの属性をつけてやって ・チェックボックスで選択されたものに関しては、クッキーに保存してやって ・お気に入りを選択した際に、クッキーを読んでクッキーの中に保存されているものに関して表示してやる まぁ、この場合ですと、リストボックスのvalueの番号あたりを利用してチェックボックスのクッキー保存をしてやれば、リストボックスとチェックボックスの関連性がでるかな？と思います。 以上、実現方法アドバイスです。
補足
アドバイス頂きまして有難うございます。 ご教授頂いたアドバイスを元に >チェックボックスの内容をそのまますぐにリストボックスのお気に入りに反映させる 形で >・リストボックスの全てにお気に入りの属性をつけてやって >・チェックボックスで選択されたものに関しては、クッキーに保存してやって の所まで何とかできました。（質問する前に一度自分でやってみたのですが、なぜか上手く行かなかったのと、800文字制限で掲載できなかったので、何も手付けずの状態で質問しましたが、再度チャレンジしてみたらとりあえず上記２点の所まではできました。原因は２つ目ＵＲＬの外部呼出しcookie.cgiの保存場所が別の所で読み込めていなかった為でした。） で、現在は、 >・お気に入りを選択した際に、クッキーを読んでクッキーの中に保存されているものに関して表示してやる の所について色々調べてはいる状況ですが、思うように成果を得られない状況で途方にくれています。 どなた様かselectメニューの特定のoptionを選択時、クッキーを読み込んで 表示するには、どのようにすればよいかご教授願えませんでしょうか 下記が現在までの状況です。 <script type="text/javascript"><!-- function tblfilter(nm,key){ if(!document.getElementsByTagName) return; var trs = document.getElementById(nm).rows; for(var i=0; i<trs.length; i++){ var li = trs[i]; if(!li.title || li.title=='') continue; var found=0; if(key == '') found=1; else { var keys = li.title.split(','); for(var j=0; j<keys.length; j++){ if(keys[j] == key){ found=1; break; } } } li.style.display = found?'':'none'; } } // --></script> <script langauge=javascript1.2> <!-- /* Cookie Functions ver1.00.0930.1412 Copyright 2001 Mugi mail:mugi@wa2.so-net.ne.jp site:http://mugi.ca.tc/ */ function savecookie(name,data,days){ var d=new Date();d.setTime(d.getTime()+1000*60*60*24*days) var exp=(arguments.length>2?' ; expires='+d.toGMTString():'') document.cookie=name+"="+escape(data)+exp } function loadcookie(name){ var m=(" "+document.cookie).match((new RegExp(" "+name+"=([^\\s;]+)","g"))) return (m==null?null:unescape(RegExp.$1)) } function init(){ var data=loadcookie("checkboxstate")||"" for(var i=0,n=0,f=document.forms;i<f.length;i++) for(var j=0,e=f[i].elements;j<e.length;j++) if(e[j].type=="checkbox"){ e[j].checked=data.charAt(n++)*1 e[j].onclick=savestate } } function savestate(){ var data="" for(var i=0,f=document.forms;i<f.length;i++) for(var j=0,e=f[i].elements;j<e.length;j++) if(e[j].type=="checkbox") data+=e[j].checked*1 savecookie("checkboxstate",data,30)//期限30日間 } //--> </script> </head> <body onload="init()"> <FORM name="sample"> <SELECT onchange="tblfilter('ex1',this.options[this.selectedIndex].value);"> <OPTION value="" selected>すべて</OPTION> <OPTION value=海>海の動物</OPTION> <OPTION value=陸>陸の動物</OPTION> <OPTION value=お気に入り>お気に入り</OPTION> </SELECT> <TABLE id=ex1> <TR title=海,お気に入り><TD><input type=checkbox value=1 title='追加'>1</TD><TD>いか</TD></TR> <TR title=陸,鳴く,お気に入り><TD><input type=checkbox value=2 title='追加'>2</TD><TD>いぬ</TD></TR> <TR title=海,鳴く,お気に入り><TD><input type=checkbox value=6 title='追加'>6</TD><TD>とど</TD></TR> </FORM></TABLE> </BODY></HTML>