0%

使用jquery和cookies控制select表单

问题源于一个群里面的提问,在一个网页上添加一个select表单,当用户选择表单的时候,内容区会显示不同的内容,并在该用户下次打开此网页的时候记住这个设置。 像这样的东东一般都会想到要用Cookies来存储设置,方便起见,对于DOM的操作就想到了jQuery(直接写js执行效率会更高,只是,人都是很懒的嘛,呵呵..)。记录下来也算是个笔记吧(Demo)。 首先写这么一个Select下拉表单,以及用来输出被选中项相应内容的块:

请选择城市
北京
上海
武汉
深圳

然后是用来处理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(“你上次选择了
“ + 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 = “你这次选择了
“ + 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;}

它们整合起来以后,大概就是如下代码了:

//<![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(“你上次选择了
“ + chosen.text());
}
$(“#choose”).change(function(){
var selected = $(“#choose option:selected”);
var output = “”;
if(selected.val() != 0){
setCookie(‘citychosen’,selected.val(),365);
output = “你这次选择了
“ + 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);
}
//]]>
选择表单

请选择城市
北京
上海
武汉
深圳

效果演示可以看这个:Demo PS:Chrome的安全工作做得可真够彻底的,本地文件居然不可以操作Cookies,害我测试了好久..