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

2023-11-05

<!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上不能正常运行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • 【wazuh】wazuh学习笔记

    1 主动响应 主动响应 执行各种对策来解决威胁 下面是一些执行对策的脚本 var ossec active response bin目录下 1 1 执行策略 1 1 1 禁用用户disable account disable account
  • Log日志级别在SpringBoot中的配置

    在使用Spring Boot进行项目开发的过程中 为了对日志进行更友好的处理 所以需要默认的日志进行自定义的配置工作 关于日志的打印情况 还是先了解一下日志的级别吧 在网上索罗了一下 介绍多种多样 在这儿进行了整理了一下 总的来说日志的打印
  • Shell脚本学习——基本语法阶段一

    Shell脚本学习 基本语法阶段一 一 输入read 1 demo1 2 demo2 二 在 bash 和 sh 中不换行的区别 三 基本运算方法 和C语言基本差不多 四 test语句 1 测试操作符如 2 测试字符串 3 测试整数 五 与
  • 院士、专家倾囊相授!26个免费5G课程发布,点击就可观看!

    冲哇 没有任何力量能阻挡我们学习的脚步 CIC科教网重磅推出的5G科普行免费课程来了 本篇文章 先让我们从CIC科教网说起 中国通信学会科普教育培训平台 即CIC科教网 是中国通信学会致力打造的信息通信领域科普教育服务平台 旨在忠实履行学会
  • opencv人脸识别

    XML文件 opencv自带xml文件位置 Python根目录 Lib site packages cv2 data 各xml文件解释 人脸检测器 默认 haarcascade frontalface default xml Stump b
  • 提升用户体验:Vue与compressor.js实现高效文件压缩

    前言 上传文件是一个常见的需求 并且文件大小往往成为限制因素之一 为了提升用户体验和节省带宽消耗 上传时的文件压缩便显得格外重要 本文将介绍基于 Vue 框架和 compressor js 的上传时文件压缩实现方法 通过在上传过程中对文件进
  • Apollo代码学习(六)—模型预测控制(MPC)

    Apollo代码学习 模型预测控制 前言 模型预测控制 预测模型 线性化 单车模型 滚动优化 反馈矫正 总结 前言 非专业选手 此篇博文内容基于书本和网络资源整理 可能理解的较为狭隘 起点较低 就事论事 如发现有纰漏 请指正 非常感谢 查看
  • 前端路上的旅行

    http www w3cplus com front end trip on road html 什么是前端 什么是前端 大部分指的是Web前端开发 这个词是从网页制作演变过来的 名称上有着很明显的时代特征 在互联网的演化过程中 网页制作是
  • 着色器glsl

    着色器使用glsl的类C语言写成的 着色器开头声明版本 接着是输入和输出变量 uniform和main函数 每个着色器入口点是main函数 在该函数中处理输入变量 将结果存放到输出变量中 着色器结构如下 version version nu
  • 走进开源:认识开源许可

    想要查看前面的笔记请翻阅我的CSDN博客 作者码字不易 喜欢的话点赞 加个关注吧 后期还有很多干货等着你 最近一直在研究开源项目 发现对开源项目的开源许可有一些模糊 现在记录下来算是一个巩固 1 走进开源 开源 一词对应英文 Open So
  • Unity project 发布成Standalone EXE版本后,它的Debug infomation在什么位置

    一 Unity工程发布成Standalone Exe后 它的Debug 信息保存位置如下 二 示例 三 log文件
  • Openwrt开发笔记(3)—— 修改路由的网关地址和无线SSID 密码

    修改网关地址 一般来说默认的网关地址是192 168 1 1 如果我们想要定制自己的网关地址的话 可以选择在刷机后使用web配置页进行修改 或者通过指令进行修改 对于项目开发者而言 在源码中修改更加符合要求 轩面介绍指令修改和源码修改的2中
  • MQTT协议-使用CONNECT报文连接阿里云

    使用网络调试助手发送CONNECT报文连接阿里云 参考 https blog csdn net daniaoxp article details 103039296 在前面文章介绍了如何组装CONNECT报文 以及如何计算剩余长度 CONN
  • anaconda换源和pip换源

    在开发中我们经常会用到第三方的包 但是由于墙的限制导致了下载国外的包 普遍偏慢 这里我们可以修改为国内的镜像源 下载速度自然就会快起来 一 pip换源 国内的镜像源有很多 但是好用的就是阿里和清华的 这里我们选择清华的镜像源 别问为什么 问
  • 全网最强,Python接口自动化测试实战-接口参数关联(购物实例)

    目录 导读 前言 一 Python编程入门到精通 二 接口自动化项目实战 三 Web自动化项目实战 四 App自动化项目实战 五 一线大厂简历 六 测试开发DevOps体系 七 常用自动化测试工具 八 JMeter性能测试 九 总结 尾部小
  • element ui的upload 手动上传头像(复制就能用)

    之前在网上看了好多 结果给的代码都不全 整了快一天 才整好 心态都崩了 想砸电脑 这里贴出来愿后来人省力 下面的代码除了最下面的axios请求需要和自己的匹配之外 其他的可以直接复制使用了 服务器接口处理函数 这里只是处理函数 其余的部分没
  • 2020软件测试最新视频教程大合集汇总

    软件测试入门教程分享给你 软件测试工程师需要适当掌握一些技能 如操作系统 WIN UNIX这个你可以有针对性的去找着学数据库 常见的有SQLSERVER ORACLE 熟悉常用的编程语言 C C JAVA测试工具 这个就比较多一些 建议循序
  • js逆向——破解百度翻译

    针对进行了ajax加载的网页 有两种方法去爬取它当中的内容 1 使用selenium进行模拟浏览器进行选择元素 然后进行爬取 这种方法最简单 但是牺牲了速度 爬虫关键就在速度 因此针对大量的数据的话 就远远不能满足了 2 使用js逆向破解
  • 解决:IE浏览器打开就自动最小化,无法打开

    方法一 先把所有的IE窗口关了 只打开一个IE窗口 最大化这个窗口 关了它 OK 以后的默认都是最大化的了 方法二 先关闭所有的IE浏览器窗口 用鼠标右键点击快速启动栏的IE浏览器图标 在出现的快捷菜单中点击 属性 系统随即弹出 启动Int
  • JavaScript cookie实现html的select标签刷新后不回到默认值而是保持之前选择值