html中select标签刷新后不回到默认值而是保持之前选择值
生活随笔
收集整理的這篇文章主要介紹了
html中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 onload="selectIndex();">
<form action="servlet/MoblieFileServlet?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>
<c:forEach items="${depts}" var="dept">
<option value="${dept.id }">${dept.name }</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td align="right">操作系統</td>
<td>
<select name="osId" id="osId" onchange="saveSelectIndex();">
<option value="0">請選擇...</option>
<c:forEach items="${oses}" var="os">
<option value="${os.id }">${os.name }</option>
</c:forEach>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="查 詢" />
<input type="reset" value="清 空" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<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/MoblieFileServlet?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>
<c:forEach items="${depts}" var="dept">
<option value="${dept.id }">${dept.name }</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td align="right">操作系統</td>
<td>
<select name="osId" id="osId" onchange="saveSelectIndex();">
<option value="0">請選擇...</option>
<c:forEach items="${oses}" var="os">
<option value="${os.id }">${os.name }</option>
</c:forEach>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="查 詢" />
<input type="reset" value="清 空" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
轉載于:https://www.cnblogs.com/linjiqin/archive/2011/06/18/2084357.html
總結
以上是生活随笔為你收集整理的html中select标签刷新后不回到默认值而是保持之前选择值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： maven的web工程打包为war并部署
- 下一篇： 分享一个VisualStudio2010