如何在刷新页面时select保持选中状态而不被刷新

最新推荐文章于 2023-05-16 17:41:11 发布

Cassie612

最新推荐文章于 2023-05-16 17:41:11 发布

阅读量1.3w

点赞数

分类专栏：前端开发学习流程文章标签： select

本文链接：https://blog.csdn.net/oneday_789/article/details/79961968

版权

前端开发学习流程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天在实习的过程中，遇到一个比较奇葩的现象：就是我在Form表单中用到了select下拉组件，当我每次选中select元素后数据都会刷新，但是select组件的值始终显示的是select的第一个元素。我想的是如何能够既刷新数据又能让select保持选中之后的状态呢，当然了ajax是不可能实现的，那仫所谓的cookie呢？我的解决办法就是：在刷新前先把select组件选中的value保存到cookies中，在页面刷新之后再重新设置select的默认值。

部分代码如下：

<body οnlοad="selectIndex();">
             <form action="history.php" method="post"> 
            <select style='width:10%;height:20%;' class='form-control' name='searchtitle' οnchange='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>

Cassie612

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
如何在刷新页面时select保持选中状态而不被刷新

今天在实习的过程中，遇到一个比较奇葩的现象：就是我在Form表单中用到了select下拉组件，当我每次选中select元素后数据都会刷新，但是select组件的值始终显示的是select的第一个元素。我想的是如何能够既刷新数据又能让select保持选中之后的状态呢，当然了ajax是不可能实现的，那仫所谓的cookie呢？我的解决办法就是：在刷新前先把select组件选中的value保存到cooki...
复制链接

扫一扫