重新加载时下拉选择重新加载到第一个选项答案

【问题标题】：Dropdown select reloads to first option when reloaded重新加载时下拉选择重新加载到第一个选项
【发布时间】：2020-10-10 04:43:02
【问题描述】：

您好，我在选择下拉菜单时遇到问题。我正在尝试存储该值，但它不起作用。我已经看过其他问题了，但没有运气。

这是一个小提琴：

function selectCss(element) {
  const a = element.options[element.selectedIndex].value;

  document.getElementById("change").onchange = function() {
    localStorage['colorPick'] = element.options[element.selectedIndex].value;
  }
  window.onload = function() {
    if (localStorage['colorPick'])
      document.getElementById("change").value = localStorage['colorPick'];
  }

  if (a == "Theme 1") {
    document.body.style.background = "pink";

  }

  if (a == "Theme 2") {
    document.body.style.background = "blue";
  }

  if (a == "Theme 3") {
    document.body.style.background = "yellow";
  }
}

body {
  background: pink;
}

<select  id="change" name="colorPick"  onchange="selectCss(this)">
  <option selected value="Theme 1">Theme 1</option>
  <option value="Theme 2">Theme 2</option>
  <option value="Theme 3">Theme 3</option>
</select>

【问题讨论】：

标签： javascript jquery css select dropdown

【解决方案1】：

代码有几个问题：

如果localStorage中有项目，则应设置select和color的值。这应该首先完成，而不是在函数内部完成。
最好使用else-if，而不是3次比较值。
侦听器已在html 元素中设置onchange，因此不应在函数中声明。
您可以定义一次元素并一直使用它。
您可以使用select.value 获取选定的值，其中select 是本示例中的html 元素

经过适当修改的工作解决方案如下：

let select = document.getElementById("change")
if (localStorage['colorPick']){
     select.value = localStorage['colorPick'];
     selectCss();
}
function selectCss() {
     const a = select.value;
     localStorage['colorPick'] = a;
     if (a == "Theme 1") {
          document.body.style.background = "pink";
     }else if (a == "Theme 2") {
          document.body.style.background = "blue";
     }else if (a == "Theme 3") {
          document.body.style.background = "yellow";
     }
}

body {background: pink;}

<select  id="change" name="colorPick"  onchange="selectCss()">
     <option selected value="Theme 1">Theme 1</option>
     <option value="Theme 2">Theme 2</option>
     <option value="Theme 3">Theme 3</option>
</select>

【讨论】：

【解决方案2】：

使用 setItem 方法来存储到本地存储。

localStorage.setItem("colorPick", element.options[element.selectedIndex].value);

使用getItem方法检索

让 colorPick = localStorage.getItem("colorPick")

【讨论】：