js实现刷新页面后select标签保持选中状态
原理：首先把选中的select标签的index存入到cookie中，当页面再次加载时，读取存入cookie中的标签index，设置该index为selected.
function set...
今天在实习的过程中，遇到一个比较奇葩的现象：就是我在Form表单中用到了select下拉组件，当我每次选中select元素后数据都会刷新，但是select组件的值始终显示的是select的第一个元素。我想的是如何能够既刷新数据又能让select保持选中之后的状态呢，当然了ajax是不可能实现的，那仫所谓的cookie呢？我的解决办法就是：在刷新前先把select组件选中的value保存到cookies中，在页面刷新之后再重新设置select的默认值。
部分代码如下：
<body onload="selectIndex();">
<form action="history.php" method="post">
<select style='width:10%;height:20%;' class='form-control' name='searchtitle' onchange='getTitleData()' type='text' id='searchtitle'>
<option value='2'>运营32位测试数据</option>
<option value='3'>运营64位测试数据</option>
<option value='4'>主干32位测试数据</option>
<option value='5'>集成32位测试数据</option>
<option value='6'>集成64位测试数据</option>
<option value='8'>主干64位测试数据</option>
</select><br>
</form>
</body> <script>
getTitleData=function(){
var searchtitle = $("#searchtitle").val();
var searchtitle = $.trim(searchtitle);
window.location = 'history.php?id=' + searchtitle;
document.cookie = "id=" + searchtitle; //将select选中的value写入cookie中
};
selectIndex=function(){
var id = 0;
var coosStr = document.cookie; //获取cookie中的数据
var coos=coosStr.split("; "); //多个值之间用; 分隔
for(var i=0;i<coos.length;i++){ //获取select写入的id
var coo=coos[i].split("=");
if("id"==coo[0]){
id=coo[1];
}
}
var stitle=document.getElementById("searchtitle");
if(stitle == 0){
stitle.selectedIndex = 0;
}
else{ //如果从cookie中获取的id和select中的一致则设为默认状态
var len = stitle.options.length;
for(var i=0;i<len;i++){
if(stitle.options[i].value == id){
stitle.selectedIndex=i;
break;
}
}
}
}
</script>
