目前，我有一个 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 元素的更改。它成功激活对 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() {}); 
    } 
}) 

我不确定我是否遗漏了一些简单的东西，但此时任何帮助使其正常工作的帮助将不胜感激。

请您参考如下方法:

使用 ES6，{[key]: value} 将创建 key key:

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() {}); 
})