Javascript 从存储的本地存储值设置多选选项

我正在尝试根据相应的localstorage值将多个select选项设置为selected

将值存储在localstorage的数组中是可行的，但是我需要帮助根据这些值选择表单中的选项

localstorage中的值是从如下复选框中收集的：

jQuery(document).ready(function(){
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    checkboxes = jQuery(".add-selectie :checkbox");
    checkboxes.on("change", function(){
        checkboxes.each(function(){
            checkboxValues[this.id] = this.checked;
        });
        localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });
    jQuery.each(checkboxValues, function(key, value) {
        jQuery('#' + key).prop('checked', value);
    });
});

这将使用localstorage中的checkboxValues键将值保存在数组中，如下所示：

{"value1":true,"value2":true,"value3":false}

但是，如果在localstorage中找到该值并将其设置为true，那么如何在表单中预先填充select选项

---

我制作了包含上述所有代码的演示表单。任何帮助都将不胜感激

下面的代码应该为您提供通过从localStorage读取值来更新选项元素的选定状态的代码段

请注意，在stackoverflow执行上下文中使用localStorage存在安全问题

我创建了一个自定义的单例/静态类CustomLocalStorage，它具有类似的方法。 此外，我还使用了完整的对象选项ValueObject返回 复选框的属性并选择元素。 var CustomLocalStorage=函数{ 变量项={}； 函数getItemKey{ 对于var\u itemKey in items{ 如果_itemKey===itemKey{ 返回JSON.parseitems[itemKey]； } } 返回null； } 函数setItemKey，itemValue{ items[itemKey]=JSON.stringifyitemValue； } 返回{ getItem:getItem， setItem:setItem } }; 函数选项ValueObjectId、标签、值{ this.id=id；//用于标识复选框 this.label=label；//本例中未使用 this.value=value；//将其绑定到select>option>value属性 this.checked=true；//将其绑定到checkbox>checked属性 } $document.readyfunction{ 函数初始化{ 初始化数据； 初始化； } 函数初始化数据{ var optionValueObjects=[]； optionValueObjects.pushnew OptionValueObject1，“选项1的标签”，“值1”； optionValueObjects.pushnew OptionValueObject2，'选项2的标签'，'值2'； optionValueObjects.pushnew OptionValueObject3，'选项3的标签'，'值3'； setItem'options'，optionValueObjects； } 函数初始化{ var optionValueObjects=CustomLocalStorage.getItem'options'； 对于变量i=0；ioption[value='+optionValueObject.value+']； optionElement.prop'selected'，optionValueObject.checked； } } 功能手柄通风口{ 函数checkboxChangeHandler{ //获取对象，更新选中的属性并将其保存回 //1.获取对象 var id=$this.prop'id'； var optionValueObjects=CustomLocalStorage.getItem'options'； var optionValueObject=optionValueObjects.filterfunctionoptionValueObject{ 如果“复选框”+选项ValueObject.id==id{ 返回optionValueObject； } }[0]; //2.更新选中的属性 var checked=$this.prop'checked'； optionValueObject.checked=选中； //将选中的特性绑定到选项选定特性 var optionElement=$optionSelect>option[value='+optionValueObject.value+']； optionElement.prop'selected'，optionValueObject.checked； //3.把它存回去 setItem'options'，optionValueObjects； } $'checkbox1'.changecheckboxChangeHandler； $'checkbox2'.changecheckboxChangeHandler； $'checkbox3'.changecheckboxChangeHandler； } 初始化； 扶手通风口； }; 值1 价值2 价值3 值1 价值2 价值3

---

您能解释一下复选框与选择选项的关系吗？还共享行动点的项目符号列表，例如，单击复选框时，应该发生什么，单击选择选项时，应该发生什么？选中复选框1 id:value1时，存储它，然后从localstorage中使用此值预先选择选项1值：页面重新加载时的值1。现在应选中/选择复选框和选择选项。是否在页面重新加载时不存储值？这些复选框位于我的网站的多个页面上。。所以我需要脚本来存储以后的值，您需要替换CustomLocalStorage.setItem'options'，optionValueObjects；到localStorage.setItem'options'，JSON.stringifyoptionValueObjects；以及getItem调用，以使其与localStorage一起工作。