下拉框未在 Chrome 扩展中显示数组

Question

我正在使用数组来填充下拉框。

我想让下拉框在我正在构建的 chrome 扩展中工作 - 即下拉列表的内容由数组填充。

我遇到了一个问题，chrome 扩展似乎没有在下拉框中显示数组，但是，如果我将文件作为常规 HTML 页面（不是浏览器扩展）运行，则下拉框按预期工作。

*第一张图片是作为 html 页面运行的文件

• 

*第二张图片是作为 chrome 扩展运行的同一文件（下拉菜单中没有可用选项）-

数组 = 0,1,2,3,4,5

HTML

<div class="dropdown">
    <select id="dropBox" onchange="getValue()"></select>
</div><br><br> 

JS

var dropBox = document.getElementById("dropBox");
var locales = [0,1,2,3,4,5];
for (var i=0; i<locales.length; i++){
    dropBox.options.add(new Option(locales[i]));
}

function getValue(){
    var drop_val = dropBox.options[dropBox.selectedIndex].value;
    alert(drop_val);
}

Answer 1

在选择元素上设置 onchange 侦听器，而不是从 HTML 文件中调用内联 Javascript 函数。

 var dropBox = document.getElementById("dropBox"); dropBox.onchange = getValue var locales = [0,1,2,3,4,5]; for(var i in locales) { dropBox.add(new Option(locales[i])); } function getValue(e){ var drop_val = e.target.value; // Do whatever you would like to do with 'drop_val' }

 <div class="dropdown"> <select id="dropBox"></select> </div>