Javascript 在选择更改时设置Chrome存储

目前，我有一个Chrome扩展的工作代码块，但是我有各种重复的代码块，我希望尽量减少所需的代码

document.getElementById('streamSelect').addEventListener('change', function() {
    var t = document.getElementById("streamSelect").value;
    chrome.storage.sync.set({ "streamSelect" : t }, function() {});
}, false)

document.getElementById('volumeSlider').addEventListener('change', function() {
    var u = document.getElementById("volumeSlider").value;
    chrome.storage.sync.set({ "volumeSlider" : u }, function() {});
}, false)

document.getElementById('currentSegment').addEventListener('change', function() {
    var v = document.getElementById("currentSegment").value;
    chrome.storage.sync.set({ "currentSegment" : v }, function() {});
}, false)

document.getElementById('nowPlaying').addEventListener('change', function() {
    var w = document.getElementById("nowPlaying").value;
    chrome.storage.sync.set({ "nowPlaying" : w }, function() {});
}, false)

document.getElementById('lastPlayed').addEventListener('change', function() {
    var x = document.getElementById("lastPlayed").value;
    chrome.storage.sync.set({ "lastPlayed" : x }, function() {});
}, false)

document.getElementById('quickLinks').addEventListener('change', function() {
    var y = document.getElementById("quickLinks").value;
    chrome.storage.sync.set({ "quickLinks" : y }, function() {});
}, false)

document.getElementById('desktopNotifications').addEventListener('change', function() {
    var z = document.getElementById("desktopNotifications").value;
    chrome.storage.sync.set({ "desktopNotifications" : z }, function() {});
}, false)

因此，我尝试创建一个较小的代码块，用于侦听对任何HTML Select元素的更改。它在对选定元素进行任何更改时成功激活，并且还正确设置了Y和Z变量，但是它似乎没有完成Chrome.Storage.Sync.Set行的执行

var setOptions = ["streamSelect", "volumeSlider", "currentSegment", "nowPlaying", "lastPlayed", "quickLinks", "desktopNotifications"]

$("select").change(function() {
    for(var i = 0; i < setOptions.length; i++) {
        var Y = setOptions[i];
        var Z = document.getElementById(Y).value;
        chrome.storage.sync.set({ Y : Z }, function() {});
    }
})

var setOptions=[“streamSelect”、“volumeSlider”、“currentSegment”、“nowPlaying”、“LastPlaying”、“QuickLink”、“desktopNotifications”]
$（“选择”）.change（函数（）{
对于（var i=0；i

---

我不确定我是否遗漏了一些简单的东西，但此时非常感谢您提供任何帮助使其工作。

使用ES6，

{[key]：value}

将创建键

键
：

var key = "test";
var obj = {[key]: "value"}; // obj = {test: "value"}

所以类似的方法可能会奏效：

$("select").change(function() {
    var id = this.id;
    var val = this.value;
    chrome.storage.sync.set({[id]: val}, function() {});
})

或者，非ES6版本：

$("select").change(function() {
    var obj = {};
    obj[this.id] = this.value;
    chrome.storage.sync.set(obj, function() {});
})

试试
addEventListener
这是一个完美的解决方案，非常简单/优雅。这是ES6特有的吗？如果是这样的话，那就值得一提，非ES6版本也值得一提。我在答案中添加了一个非ES6版本。