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

【问题标题】：Trying to change the selected attribute dynamically after updated page更新页面后尝试动态更改所选属性
【发布时间】：2018-02-23 02:40:30
【问题描述】：

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

这就是我的意思。这是我的 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;

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

【问题讨论】：

你有文件加载功能吗？你的代码在里面？
据我所知，您的代码是说：无论选择下拉列表中的哪个选项，都将其选定状态设置为 true，当然已经是这种情况了。您需要（而不是获取选定的索引），获取与当前页面颜色匹配的选项的索引，并将 -that- 的选定属性设置为 true。确保在文档准备好时执行此操作。
@animake 不，我没有 onload 功能。
尝试实现它，如果你能提供你用来制作 localeStorage 变量的代码
最好提供一个jsfiddle来检查你的问题

标签： javascript html css local-storage

【解决方案1】：

我注意到您在selectcolor.option 中使用selectcolor.options.selectedIndex .. 您的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>

尝试将您的逻辑建立在上述代码的基础上。希望这会有所帮助

【讨论】：

感谢您的回复。我现在遇到的问题是我需要下拉菜单才能选择它。 var getsavedcolor = localStorage.getItem('color') var f = document.getElementById("grey").value; if(f == getsavedcolor){ //使下拉菜单被选中的代码 }else{ // }
我没听懂你的意思，但试着看看@PhilipCarlsson 上面的更新答案

【解决方案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;
}

【讨论】：