我正在尝试使用 DOM 创建搜索数据列表,并使用 allCardsArray 中的选项填充数据列表。我知道 option.value 正在工作,但没有任何选项被附加到数据列表中。下面是我正在尝试制作的简单表格。我很感谢您的帮助。
function generate_topnav(lowerCaseHeroName, allCardsArray){
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var database = document.createTextNode("OverRealm Card Database")
database.id = 'database';
cell1.appendChild(database);
row.appendChild(cell1);
var cell2 = document.createElement('td');
var input = document.createElement('input');
input.style.fontSize = '18pt';
input.style.height = '56pt';
input.style.width = '300px';
input.setAttribute('placeholder', ' Search for a card...');
input.setAttribute = ('type', 'text');
input.id = 'minionSearch';
input.setAttribute = ('list', 'cardSearch');
input.onchange = function() {
redirect(value);
};
cell2.appendChild(input);
var datalist = document.createElement('datalist');
datalist.id = 'cardSearch';
//THIS IS WHERE I'M TRYING TO POPULATE OPTIONS IN DATALIST
allCardsArray.forEach(function(item){
var option = document.createElement('option');
option.value = item;
datalist.appendChild(option);
});
input.appendChild(datalist);
row.appendChild(cell2);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);}
我最初是在 HTML 中完成此操作的,它有效,看起来像这样:
<input style="font-size:18pt; height:56px; width:300px;" type="text" id="minionSearch" list="cardSearch" placeholder=" Search for a card..." onchange="javascript:redirect(value)">
<datalist id="cardSearch"></datalist>
<script>
var list = document.getElementByID("cardSearch");
allCardsArray.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
我很好奇为什么我的 DOM 版本不起作用。
最佳答案
input.setAttribute = ('type', 'text');
应该是input.setAttribute('type', 'text');
和input.setAttribute = ('list', 'cardSearch');
应该是input.setAttribute('list', 'cardSearch');
<option>
元素被附加到 <datalist>
元素。问题是问题处的 JavaScript 未设置 .textContent
创建的<option>
元素。
关于javascript - 通过 DOMS 和 Javascript 中的数组向数据列表添加选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45534583/