<!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 onload="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" onchange="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" onchange="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上不能正常运行。
相关推荐
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
Html+css+JavaScript实现的3D球面标签云效果
本文实例讲述了JavaScript实现通过select标签跳转网页的方法。分享给大家供大家参考,具体如下: 我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过...
javascript实现操作cookie实现的可记忆菜单
这个文件包含了javascript对浏览器cookie文件的设置、读、写、删除四个函数,非常好用。
NULL 博文链接:https://heisetoufa.iteye.com/blog/356950
Javascript实现的网页自动刷新,很实用
好看的select下拉框(带搜索功能),由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
Javascript操纵Cookie实现购物车程序.txtJavascript操纵Cookie实现购物车程序.txt
用javascript实现不按Ctrl实现Multiple Select多选
通过函数获取JavaScript cookie
页面表格实现不刷新排序,通过javascript 来实现的。例子很简单,希望能有所帮助
javascript实现的无刷新弹出登录窗口
使用JavaScript模拟select
javascript 操作cookiejavascript 操作cookiejavascript 操作cookie
JavaScript实现select功能代码
通过javascript实现cookie功能 但是这个项目是个java工程 直接点WebRoot下面的页面可以查看
asp.net javascript 实现无刷新提交
根据键盘按键自动选择下拉框里匹配的项,其实select标签本来就要自动匹配的功能,但是它不能匹配汉字。该js实现了匹配汉字的功能。压缩包里包含了,js文件和一个demo文件。只要把js引用进去就好了,其他什么也不用做...