尝试在更新页面后动态更改所选属性

Question

我真的在与这个问题斗争，所以希望你们中的一些人可以帮助我。 我拥有的网站，您可以选择不同的网站背景颜色，然后选择的颜色存储在localstorage中。因此，在更新页面后，将保存颜色。但是，我遇到的问题是，您从中选择颜色的下拉菜单与您上次更改的颜色不同。

这就是我的意思。 这是我的HTML代码

<select id="selectcolor">
      <option value="css/css.css" id="grey">Standard grått</option>
      <option value="css/red.css" id="red">Häftigt rödigt!</option>
      <option value="css/green.css" id="green"> Häftigt grön-svart! </option>
    </select>

所以这就是我改变颜色时的样子

之后，当我刷新页面时，就会发生这种情况。颜色保持红色，但选项会变回标准颜色，而不是红色。

我试图用我的javascript代码动态更改它

var selectcolor = document.getElementById("selectcolor");
selectcolor.options[selectcolor.options.selectedIndex].selected = true;

但这似乎不起作用，我不明白为什么......？ 非常感谢这里的一些帮助。

Answer 1

我注意到您在selectcolor.options.selectedIndex内使用selectcolor.option ..您的localeStorage变量在哪里？当我使用静态值selectcolor.options.selectedIndex更改2时，它工作正常。我认为你的localeStorage变量是个问题。

尝试将所选索引存储在localeStorage变量中，然后执行以下操作：

var selectcolor = document.getElementById("selectcolor");
selectcolor.options[yourLocaleStorageVariable].selected = true;

<强>更新

<script>
   function changeBg() {
      var selectcolor = document.getElementById("selectcolor");
      document.body.style.background = selectcolor.options[selectcolor.selectedIndex].value;
      localStorage.setItem("selectedcolor", selectcolor.selectedIndex);
   }
</script>

<select id="selectcolor" onchange="changeBg()">
  <option value="" id="grey">Standard grått</option>
  <option value="red" id="red">Häftigt rödigt!</option>
  <option value="green" id="green"> Häftigt grön-svart! </option>
</select>

<script>
  var selectcolor = document.getElementById("selectcolor");
  if (localStorage.getItem("selectedcolor")) {
    selectcolor.options[localStorage.getItem("selectedcolor")].selected = true;
    document.body.style.background = selectcolor.options[selectcolor.selectedIndex].value;
  }
<script>

尝试将您的逻辑基于上面的代码。希望这有帮助

Answer 2

我想出了答案。 我需要应用的是selectedIndex属性。因此，如果有人在发布解决方案时遇到此问题 所以正确的代码是

var getsavedcolor = localStorage.getItem('color')
var a = document.getElementById("grey").value;
var b = document.getElementById("red").value;
var c = document.getElementById("green").value;
if(a == getsavedcolor){
  document.getElementById('selectcolor').selectedIndex=0;
}else if (b == getsavedcolor){
  document.getElementById('selectcolor').selectedIndex=1;
}else if (c == getsavedcolor){
  document.getElementById('selectcolor').selectedIndex=2;
}else{
  document.getElementById('selectcolor').selectedIndex=0;
}