JavaScript cookie实现html的select标签刷新后不回到默认值而是保持之前选择值

news/2024/5/18 13:28:53 标签: JavaScript, cookie, select, 之前选择值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<base href="<%=basePath%>">
	<title>3G业务</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<script type="text/javascript">
		function saveSelectIndex(){   
			var typeId=document.getElementById("typeId");   
			var typeIdText=typeId.options[typeId.selectedIndex].value;   
			var osId=document.getElementById("osId");   
			var osIdText=osId.options[osId.selectedIndex].value;   //设置多个cookie    
			document.cookie="typeIdText="+typeIdText;   
			document.cookie="osIdText="+osIdText;
		}
		function selectIndex(){   //记得初始化,否则会出现undefined   
			var typeIdText=0;   
			var osIdText=0;   //获取多个cookie   
			var coosStr=document.cookie;//注意此处分隔符是分号加空格   
			var coos=coosStr.split("; ");   
			for(var i=0;i<coos.length;i++){      
				var coo=coos[i].split("=");      
				//alert(coo[0]+":"+coo[1]);      
				if("typeIdText"==coo[0]){ 
					typeIdText=coo[1];      
				}
				if("osIdText"==coo[0]){ 
					osIdText=coo[1];      
				}   
			}     
			var typeId=document.getElementById("typeId");   
			if(typeIdText==0){      
				typeId.selectedIndex=0;   
			}else{      
				var length=typeId.options.length;      
				for(var i=0;i<length;i++){ 
					if(typeId.options[i].value==typeIdText){    
						typeId.selectedIndex=i;    
						break; 
					}      
				}   
			}      
			var osId=document.getElementById("osId");   
			if(osIdText==0){      
				osId.selectedIndex=0;   
			}else{      
				var length=typeId.options.length;      
				for(var i=0;i<length;i++){ 
					if(osId.options[i].value==osIdText){    
						osId.selectedIndex=i;    
						break; 
					}      
				}   
			}   
		}
	</script>
	</head>    
	<body οnlοad="selectIndex();">
		<form action="servlet/MoblieServlet?action=query" method="post">
			<fieldset style="width: 250px; height: 160px">
				<legend>3G业务查询</legend>
				<table align="center">    
					<tr>
						<td align="right">分类</td>
						<td>
							<select name="typeId" id="typeId" οnchange="saveSelectIndex();">
									<option value="0">请选择...</option>
								  <option value="大类">通信类</option>
								  <option value="中类">资讯类</option>
								  <option value="小类">娱乐类</option>
								  <option value="商品">互联网</option>
							</select>
						</td>    
					</tr>    
					<tr>
						<td align="right">操作系统</td>
						<td>
							<select name="osId" id="osId" οnchange="saveSelectIndex();">
								<option value="0">请选择...</option>
								<option value="Unix">android</option>
								<option value="Aix">WM6</option>
								<option value="Linux">WM7</option>
								<option value="Windows">S60 V5</option>
								<option value="Windows">S60 V3</option>
								<option value="Windows">Symbian 3</option>
								<option value="Windows">bada</option>
								<option value="Windows">IOS</option>
								<option value="Windows">webos</option>
								<option value="Windows">linux</option>
							</select>
						</td>
					</tr>    
					<tr align="center">
						<td colspan="2">
							<input type="submit" value="查询" />
							<input type="reset" value="清空" />
						</td>    
					</tr>
				</table>    
			</fieldset>
		</form>    
	</body>
</html>

     运行效果:

     刷新页面,仍然保持当前选择值。

     注意:如上实例,在IE8、Firefox上运行正常,但在Chrome上不能正常运行。


http://www.niftyadmin.cn/n/1318985.html

相关文章

七篇文章助你入门Angular开发

七篇文章助你入门Angular开发 第一篇Angular的介绍以及基本环境搭建 第二篇Angular模板语法、插值语法、事件绑定 第三篇Angular内置基本指令介绍 第四篇Angular组件的创建、组件声明周期钩子函数 第五篇Angular父子组件传值&#xff0c;父传子&#xff0c;子传父&#xf…

接下来是沉重的一堆任务啊!

年过完了&#xff01;残酷的现实又出现了。一直是我不愿意面对的事情&#xff0c;接下来&#xff0c;我还有这样一些任务&#xff1a; 1、用stm32做的烟花控制器 这个已经是一拖二拖三拖再拖的东西了&#xff0c;我现在最害怕的事情就是刘老师来联系我&#xff0c;无论是QQ上还…

Style 中的 ‘>>>‘ 与 ‘ /deep/(sass/less)‘介绍

Vue style 深度作用选择器 这两个深度选择器的主要作用就行修改UI库中的默认样式 ‘>>>’ .page {>>> .van-skeleton {margin-top: 10px;}>>> .van-skeleton__title {height: 30px;}>>> .van-skeleton__row {height: 30px;}.van-pull-r…

PL/SQL编程(一)基础篇

PL/SQL编程 目标&#xff1a; 1.掌握pl/sql概念 2.掌握pl/sql编程技术&#xff0c;包括编写过程、函数、触发器等 一、pl/sql基础介绍 1.pl/sql是什么&#xff1f; pl/sql&#xff08;procedural language/sql&#xff09;是Oracle在标准的sql语言上的扩展。pl/sql不仅允许嵌入…

Vue form表单密码强度校验 必须包含大小写字母、数字、特殊字符长度再8-16位之间

let password this.password let reg !/(?.*[A-Z])(?.*[a-z])(?.*[0-9])(?.*[\W_]).{8,16}/if(reg.test(password)){ //表单展示内容 }else{ //表单展示内容 }

angular-phonecat-snapshots增加浏览历史功能

给AngularJS官网入门教程的angular-phonecat-snapshots实例增加浏览历史的功能。 效果如下&#xff1a; 具体实现&#xff1a; 1.修改phone-list.html&#xff0c;增加view <div class"container-fluid"><div class"row-fluid"><div class&…

一道栈的输入输出序列问题

一个栈输入序列为1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;则下列序列中不可能是栈的输出序列是( ) A&#xff0e;1 2 3 4 5 B&#xff0e;5 4 3 2 1 C&#xff0e;2 3 4 5 1 D&#xff0e;4 1 2 3 5 分析&#xff1a;可以根据答案来判定的&#xf…

DLNA第一步UPnP协议栈

前面公司有DLNA项目&#xff0c;研究了一下&#xff0c;在网上关于DLNA的资源很少,就将自己的心得写出来&#xff0c;以供参考。 其它的关于DLNA的介绍就不多说&#xff0c;要了解DLNA需要了解upnp,因为DLNA在upnp之上&#xff0c;初学者可以从http://www.upnp.org下载upnp的资…