从选择值中传递一个变量到document.querySelectorAll(Variable here)

Question

我希望能够从HTML页面的Selector下拉菜单中选择一个值，然后将 "值 "传递给.js页面的document.querySelectorAll()。尝试了许多不同的变化，但都没有实现。

<div class="custom-select">
     <select id="selected" onchange="changeKey()">
            <option value="0">Select Key:</option>
            <option value="aminorpenta">A</option>
     </select>
</div>




Var aminorpenta = [".ANat",".CNat",".DNat",".ENat",".GNat"];

function changeKey() {
 var elements = document.querySelectorAll(variable goes here), i;
 for (i = 0; i < elements.length; ++i) {
 elements[i].style.backgroundColor = "yellow";
 elements[i].style.color = "black";
alert(dayVal);
 }
}

Answer 1

在标准Javascript对象符号中使用值的地图.你可以通过使用方括号符号从一个对象中使用动态键检索值。

const myObject = {
    aminorpenta: [".ANat",".CNat",".DNat",".ENat",".GNat"],
    //  more key: value pairs
}
function changeKey() {
    const selectElement = document.getElementById("selected");
    const selectedValue = selectElement.options[selectElement.selectedIndex].value;
    const elements = document.querySelectorAll(myObject[selectedValue])
    for (i = 0; i < elements.length; ++i) {
        elements[i].style.backgroundColor = "yellow";
        elements[i].style.color = "black";
    }
}

已编辑。