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

最新推荐文章于 2024-07-30 10:56:44 发布

huqin186

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.7w

点赞数 7

分类专栏： JavaScript 文章标签： cookie select javascript

本文链接：https://blog.csdn.net/huqin186/article/details/52092074

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原理：首先把选中的select标签的index存入到cookie中，当页面再次加载时，读取存入cookie中的标签index，设置该index为selected.

<html>
<head>
<script type="text/javascript">
    function setCookie(name, value) {
        var exp = new Date();
        exp.setTime(exp.getTime() + 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }
    function getCookie(name)
    {
        var regExp = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        var arr = document.cookie.match(regExp);
        if (arr == null) {
            return null;
        }
        return unescape(arr[2]);
    }
</script>
</head>
<body>
<select id="select_1" onclick="setCookie('select_1',this.selectedIndex)">
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="cake">cake</option>
</select>

<script type="text/javascript">
    var selectedIndex = getCookie("select_1");
    if(selectedIndex != null) {
        document.getElementById("select_1").selectedIndex = selectedIndex;
    }
</script>
</body>
</html>

huqin186

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
7
评论
js实现刷新页面后select标签保持选中状态

原理：首先把选中的select标签的index存入到cookie中，当页面再次加载时，读取存入cookie中的标签index，设置该index为selected.<html><head><script type="text/javascript"> function setCookie(name, value) { var exp = new Date();
复制链接

扫一扫

专栏目录