问题源于一个群里面的提问，在一个网页上添加一个select表单，当用户选择表单的时候，内容区会显示不同的内容，并在该用户下次打开此网页的时候记住这个设置。
像这样的东东一般都会想到要用Cookies来存储设置，方便起见，对于DOM的操作就想到了jQuery（直接写js执行效率会更高，只是，人都是很懒的嘛，呵呵..）。记录下来也算是个笔记吧(Demo)。
首先写这么一个Select下拉表单，以及用来输出被选中项相应内容的块：
<!--以下就是一段普通的select下拉菜单--> <select id="choose"> <option value="0">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="wuhan">武汉</option> <option value="shenzhen">深圳</option> </select> <div id="output" class="default"></div>
然后是用来处理Cookies的函数，其实jQuery有个插件是干这个的，不过貌似有点小Bug，所以我用的是以下函数：
//这一大段代码你没有必要知道它的确切意思，只要复制粘贴就可以了，他们是用来提供操作Cookies的支持的 function setCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function dropCookie(name) { setCookie(name,"",-1); }
然后是用来操作表单和Cookies的js：
$(function(){ //以下部分是提取Cookie并对网页内容进行预设的过程 var cityChosen = getCookie('citychosen'); //取得cookie中保存的值 if(cityChosen!=null && cityChosen!=''){ //如果有这个cookie值 var chosen = $('#choose option[value="'+cityChosen+'"]'); //绑定cookie中保存的那个城市所对应的选项 chosen.attr('selected',true); //使此选项变为选定状态 $("#output").removeClass().addClass(cityChosen).html("你上次选择了<br />" + chosen.text()); //为id为output的div添加class为相应城市名称的类，以便在css中分别定义样式，并输出相应文字 } //以下部分是用户对下拉菜单进行选取的时候，将设置存到Cookie，并对相应内容部分进行设定 $("#choose").change(function(){ var selected = $("#choose option:selected"); //浏览者选中一个选项 var output = ""; if(selected.val() != 0){ //如果选项的值不为0 setCookie('citychosen',selected.val(),365); //将被选中选项的value值存在名为citychosen的cookie里面，有效期一年 output = "你这次选择了<br />" + selected.text(); //设定output中的内容 } $("#output").removeClass().addClass(selected.val()).html(output); //在id为output的div里面输出相应的内容 }); });
想要效果看得更清楚明白一点，写了一点点小CSS：
*{ margin:0; padding:0;} body{ font:24px Verdana, Geneva, sans-serif; margin:100px;} #output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;} .default{ background:#CCC;} .beijing{background:red;} .shanghai{background:blue;} .wuhan{background:orange;} .shenzhen{background:plum;}
它们整合起来以后，大概就是如下代码了：
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin:0; padding:0;} body{ font:24px Verdana, Geneva, sans-serif; margin:100px;} #output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;} .default{ background:#CCC;} .beijing{background:red;} .shanghai{background:blue;} .wuhan{background:orange;} .shenzhen{background:plum;} --> </style> <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var cityChosen = getCookie('citychosen'); if(cityChosen!=null && cityChosen!=''){ var chosen = $('#choose option[value="'+cityChosen+'"]'); chosen.attr('selected',true); $("#output").removeClass().addClass(cityChosen).html("你上次选择了<br />" + chosen.text()); } $("#choose").change(function(){ var selected = $("#choose option:selected"); var output = ""; if(selected.val() != 0){ setCookie('citychosen',selected.val(),365); output = "你这次选择了<br />" + selected.text(); } $("#output").removeClass().addClass(selected.val()).html(output); }); }); //以下是用来处理Cookies的函数 function setCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function dropCookie(name) { createCookie(name,"",-1); } //]]> </script> <title>选择表单</title> </head> <body> <select id="choose"> <option value="0">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="wuhan">武汉</option> <option value="shenzhen">深圳</option> </select> <div id="output" class="default"></div> </body> </html>
效果演示可以看这个：Demo
PS：Chrome的安全工作做得可真够彻底的，本地文件居然不可以操作Cookies，害我测试了好久..
可以任意转载, 转载时请务必以超链接形式标明文章原始出处及此声明
本文地址：http://interjc.net/archives/2009/11/30/jquery-cookies-select-form.html
很好，俺收下了，只是个中的原理很是不清楚。
img回复
interjc 回复:
十一月 30th, 2009 - 21:06
@刀哥, 写的时候急着出门没写说明，以后有时间加上。
img回复