如何在刷新页面时select保持选中状态而不被刷新
今天在实习的过程中,遇到一个比较奇葩的现象:就是我在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>