带有本地存储的下拉 CSS

Question

用户可以从下拉列表中选择一个主题，选定的主题将存储在本地存储中。虽然它可以将下拉值保存在本地存储中，但它不会调用样式表。请帮忙，谢谢！

请原谅科学怪人类型的代码。 JS 对我来说是陌生的，我是一名设计师。

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>
</head>
<body>

<select id="mySelect" class="test">
    <option value="style1.css">Option A</option>
    <option value="style2.css">Option B</option>
    <option value="style3.css">Option C</option>
</select>


<!--local storage-->
<script>
 $('.test').change(function() {
    localStorage.setItem(this.id, this.value);
}).val(function() {
    return localStorage.getItem(this.id)
});
</script>
<!--dropdown css-->

 <script>
        function setStyleSource (linkID, sourceLoc) {
      var theLink = document.getElementById(linkID);
      theLink.href = sourceLoc;
      console.log(theLink.href);
    }

    document.getElementById("mySelect").addEventListener("change", function(){
        var selected = this.options[this.selectedIndex].value;
        setStyleSource ("s1", selected)
    });
    </script>


</body>
</html>

1.更改css的下拉菜单有效。 2.localstorage 用于所选选项的工作。 但是存储的选定选项实际上并没有显示它自己的 css 表（而是显示默认 css）。

Answer 1

使用val() 更改下拉值不会触发change 事件，您必须在设置值后手动触发它：

$('.test').val(localStorage.getItem(this.id)).trigger('change'); // OR .change()

还为change 添加事件侦听器在触发相同：

function setStyleSource(linkID, sourceLoc) {
  var theLink = document.getElementById(linkID);
  theLink.href = sourceLoc;
  console.log(theLink.href);
}

document.getElementById("mySelect").addEventListener("change", function() {
  var selected = this.options[this.selectedIndex].value;
  setStyleSource("s1", selected)
});

$('.test').change(function() {
  localStorage.setItem(this.id, this.value);
}).val(function() {
  return localStorage.getItem(this.id)
}).trigger('change');