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

原创 2018年04月16日 16:14:24

今天在实习的过程中,遇到一个比较奇葩的现象:就是我在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>


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ONEDAY_789/article/details/79961968

js实现刷新页面后select标签保持选中状态

原理:首先把选中的select标签的index存入到cookie中,当页面再次加载时,读取存入cookie中的标签index,设置该index为selected. function set...
  • huqin186
  • huqin186
  • 2016-08-02 10:40:34
  • 4418

html中select标签刷新后不回到默认值而是保持之前选择值

问题描述:在使用select标签时,当选定下拉菜单的某一个值后,点击搜索可以搜索出相应的结果。但是,当点击下一页或者刷新页面时,select选定的条件会发生改变。 全部 有效 ...
  • sinat_26172101
  • sinat_26172101
  • 2015-08-24 14:14:05
  • 8483

刷新页面时 select、raido值保持不变

刷新页面时,要使下拉菜单(select)、raido保持不变,用ajax是无法实现的。我想只能通过cookies才能实现。刷新前先把select或radio的值保存在cookies中,刷新后再填回去。...
  • fjnu2008
  • fjnu2008
  • 2012-04-28 12:04:27
  • 4915

Select选择后,刷新页面保存上一次选择内容

  • cl123cpzaihu
  • cl123cpzaihu
  • 2016-01-19 19:43:38
  • 5205

两级联动select刷新后,select值保持不变

背景 还是学院和专业的关系,我需要保持点击提交按钮后,页面select中继续维持提交前的值 网上有几种办法,要么通过url跳转时候附带参数形式传回页面,或者提交时候讲select的值保存在cookie...
  • zhiy_wis
  • zhiy_wis
  • 2013-12-02 16:34:49
  • 1659

解决html中刷新页面后checkbox还选中的问题

解决html中刷新页面后checkbox还选中的问题  今天在测试代码时候发现在电脑360浏览器和手机浏览器中的checkbox选中后,按f5刷新页面后checkbox还是选中的。 解决方...
  • dmt742055597
  • dmt742055597
  • 2017-09-08 13:48:16
  • 584

ztree刷新后依然保持之前的选中节点状态

1. 查找 name = "test" ,或者id="123456"的节点数据var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = tre...
  • u014033756
  • u014033756
  • 2017-05-22 22:55:23
  • 1239

vue导航栏刷新,选中样式不修改(选中状态刷新不消失)

  • qq_16055765
  • qq_16055765
  • 2018-02-27 13:20:52
  • 295

表单提交之后怎样让它保持之前选择<select></select>

在表单提交之后,页面刷新,选择被清空,那么如何保持之前的选择呢? thinkPHP后台把所需的数据传到前台 -> 经过判断加上默认选项...
  • qq_33867131
  • qq_33867131
  • 2017-11-01 14:37:43
  • 802

vue导航栏(选中状态刷新不消失)

Vue导航栏         用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果,底部...
  • wang1006008051
  • wang1006008051
  • 2017-12-01 15:31:41
  • 1164
收藏助手
不良信息举报
您举报文章:如何在刷新页面时select保持选中状态而不被刷新
举报原因:
原因补充:

(最多只允许输入30个字)