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

在 select 元素上为 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>

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

Dropdown box not showing Array in Chrome Extension

html

javascript

arrays

dropdownbox

google-chrome-extension