& lt; select>选项在更改页面后保持不变

<select> option stay same after changing pages

本文关键字：select lt 选项      更新时间：2023-09-26

我添加了一个主题选择菜单到我的网站，我想让主题选择保持不变后，你改变页面，因为我添加了选择菜单到每个页面，但它不断重置时改变页面，有人可以告诉我如何做到这一点?我的代码:

            <select onchange="javascript:changeColor(this);">
            <option selected disabled hidden>Theme</option>
            <optgroup label="Themes"></optgroup>
            <option value="white">Light</option>
            <option value="#222222">Dark</option>
            <option value="red">Red</option>
        </select>
<script>
function changeColor(el) {
    var theme = el.value;
    document.body.style.background = theme;
}
</script>

您可以将您想要的颜色存储在localStorage:

游乐场:http://jsbin.com/cisicay/2/edit?html、css js,控制台输出

// On page load let's see if we stored any theme color
var theme = window.localStorage.theme;
// This function can be both triggered as Standalone 
// or on Select onchange event:
function changeColor(el) {
  // If it was triggered by our Select element store the new theme color
  if(el) theme = window.localStorage.theme = el.value;
  // Set the color
  if(theme) document.body.style.background = theme;
}
// Trigger theme change on page load
changeColor();

<select onchange="changeColor(this);">
  <option disabled hidden>Theme</option>
  <optgroup label="Themes">
    <option value="#eee">Light</option>
    <option value="#222">Dark</option>
    <option value="red">Red</option>
  </optgroup>
</select>

也改变选择值

这是另一个例子，将改变你的select值以及页面加载和回退到#eee (轻变体)
(注意:要使其工作，请删除默认的selected选项属性!并为SELECT元素添加ID)

游乐场:http://jsbin.com/cisicay/3/edit?html、js、控制台、输出

function changeColor(el) {
  document.body.style.background = localStorage.theme = el ? el.value : localStorage.theme || "#eee";
  document.getElementById("theme").value = localStorage.theme
}
changeColor();

<select id="theme" onchange="changeColor(this);">
  <option disabled hidden>Theme</option>
  <optgroup label="Themes">
    <option value="#eee">Light</option>
    <option value="#222">Dark</option>
    <option value="red">Red</option>
  </optgroup>
</select>

您的脚本将在每次页面加载时运行。您需要存储选中的值，并在页面加载时检查它。

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function changeColor(el) {
  var theme = el.value;
  document.body.style.background = theme;
  createCookie('siteTheme', theme, 365);
}
$(function() {
  var theme = readCookie('siteTheme');
  if( theme != '' && theme != 'undefined') {
    document.body.style.background = theme;
  }
});
<select onchange="javascript:changeColor(this);">
  <option selected disabled hidden>Theme</option>
  <optgroup label="Themes">
    <option value="white">Light</option>
    <option value="#222222">Dark</option>
    <option value="red">Red</option>
  </optgroup>
</select>

相关文章：