页面刷新后怎么让select保持选中上一个选定值,可以用隐藏域保存吗

chellhoo
  • 54

有人说用隐藏域保存value,给select触发onchange事件后改变隐藏域的值,可是我用这个方法写在页面刷新之后隐藏域并不能保存上面的值(是我写错了 还是这个方法是不可行的?)

html的代码

<select class="form-control" id="search-select" onchange="change()">
                  <option value="course" selected>课程</option>
                  <option value="major">专业</option>
                  <input type="hidden" name="selectVal" value="course" id="selectVal">
            </select>

js的代码

var selectVal=document.getElementById("selectVal");
    var select=document.getElementById("search-select");
    selectVal.value=select.value;
    alert(selectVal.value);
    function change(){
          var val=select.options[select.selectedIndex].value;
          selectVal.value=val;
        //用隐藏域存数据 
    }
    for(var i=0;i<select.options.length;i+=1){
        if(select.options[i].value==selectVal.value){
            select.options[i].selected=true;
            break;
        }
    }

接触js不多+ +有点懵逼
除了从后台返回数据和用Ajax 请问各位大神还有其他方法吗?

回复
阅读 12k
8 个回答

把选择的值放入location.hash中,无论是页面刷新,还是页面分享都可以很好的解决

localStorage或者cookie

<select name="sel" id="se">
    <option value="select your choose">select your choose</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>
<input type="hidden">
<script type="text/javascript">
var se = document.getElementById('se');
se.onchange = function(){
    localStorage.value = this.value;
    localStorage.index = this.selectedIndex;
    // console.log( localStorage.index +";"+ localStorage.value );
}
window.onload = function(){
    // alert( localStorage.index +";"+ localStorage.value );
    se.options[ localStorage.index ].selected = true;
}

页面加载不是onload吗?onchange也有这功能?是我时间长不接触,新出来的功能难道

建议是使用localstorage,保存住选中的状态,进入新页面,先取这个存好的值(但是他换电脑,换浏览器你就gg了)

vivvn
  • -1
新手上路,请多包涵

localstorage 保存一个selectid的值,再写一个js让option的value值等于selectid的时候selected不就可以。

chellhoo
  • 54

我说说我解决这个问题的过程吧= =
我现在上网找这个问题的解决方法,先后用了隐藏域、localStorage、cookie、sessionStorage(不过最后都不是用这些方法)
隐藏域在页面刷新之后就会清除的= =(为什么网上那么多人推荐..)
“cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。”
这个是网上找的cookie和另外两个的区别
而localStorage在浏览器关闭之后仍会一直保存的,sessionStorage仅在同一个会话(同属一个项目里面的页面)中的页面才能访问并且当会话结束后数据也随之销毁。(其实先不论下面发现的问题,其实我觉得sessionStorage比localStorage更适合这个情况)
可是,后来我问了一些大大,他们说这样只能保存数据,可是若以后想要把某一页面链接分享给别人,别人并不能看到你想要给他看到的页面,所以要用js正则获得url参数并值加到url的参数上面。上面回答也有一位大大说用location.hash,应该也是可行的吧> < 我还要再去试试,毕竟这些方法我都没有接触过也不会+ +

最后谢谢各位大大啦~

页面刷新页面里面的值都会为初始状态。 你可以通过localstorage

宣传栏