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

原理:首先把选中的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">appleoption>
    <option value="banana">bananaoption>
    <option value="cake">cakeoption>
select>

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

你可能感兴趣的:(JavaScript)