我正在创建一个 Google Chrome 扩展程序，它基本上只是一个下拉菜单和一个带有数据列表的输入框。更改下拉菜单中的选择会更改输入框使用的数据列表。我有大约一百个数据列表，其中一些有数千个选项。我正在寻找一种方法来减少 html 文件(目前大约 930 kb)的加载时间，我想将数据列表保存在一个单独的 html 文件中，并且只在我更改下拉选择时引用它们。
示例 html 文件
<head>
<script type="text/javascript" src="test.js"></script>
</head>
Select Food group
<select id="foodgroup">
<option>Select One</option>
<option>Vegetable</option>
<option>Fruit</option>
</select>
<br /><br />
Enter name of food
<br /><br />
<input id="entry"></input>
<datalist id="Vegetable">
<option>Pumpkin</option>
<option>Squash</option>
<option>Carrot</option>
<option>Lettuce</option>
<option>Bell Pepper</option>
</datalist>
<datalist id="Fruit">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Pineapple</option>
<option>Strawberry</option>
</datalist>
示例js文件
document.addEventListener('DOMContentLoaded', function() {
var box = document.getElementById('entry');
var fg = document.getElementById('foodgroup');
function swapList(){
box.value="";
var list = fg.value;
box.setAttribute('list', list);
}
document.getElementById("foodgroup").onchange = swapList;
});
最佳答案
您可以在 JavaScript 中创建包含各种数据列表的数组。如果需要，这些可以放在单独的文件中，并通过脚本标签链接。下面的代码片段显示了本地定义的数组，因为此代码片段不存在外部文件。 在选择食物类型时，可以使用适当的数组为数据列表创建新的 DOM 元素:
var foodgroup = document.getElementById("foodgroup");
var datalistCont = document.getElementById("datalistCont");
//
function start() {
foodgroup.addEventListener("change", loadDatalist);
}
//
function loadDatalist() {
datalistCont.innerHTML = "";
var food = foodgroup.options[foodgroup.selectedIndex].value;
//
if (food == "fruit" || food == "veg") {
var inp = document.createElement("INPUT");
datalistCont.appendChild(inp);
inp.setAttribute('list', food);
//
var dl = document.createElement("DATALIST");
dl.id = food;
datalistCont.appendChild(dl);
//
newDatalist = document.getElementById(food);
//
var selectedArray = window[food];
for (var x = 0; x < selectedArray.length; x++) {
var opt = document.createElement("OPTION");
opt.value = selectedArray[x];
newDatalist.appendChild(opt);
}
}
}
//
veg = ["Pumpkin", "Squash", "Carrot", "Lettuce", "Bell Pepper"];
fruit = ["Apple", "Orange", "Banana", "Pineapple", "Strawberry"];
//
window.load = start();Select Food group
<select id="foodgroup">
<option value="none">Select One</option>
<option value="veg">Vegetable</option>
<option value="fruit">Fruit</option>
</select>
<br />
<div id="datalistCont"></div>关于javascript - 我可以从单独的文件中引用/加载 <datalist> 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55698704/