我可以参考/加载一个<datalist>从一个单独的文件？

Question

我正在创建一个 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;
});

Answer 1

您可以在 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>

我可以参考/加载一个<datalist>从一个单独的文件？

问题描述

1 个解决方案

解决方案1
1 2019-04-16 01:24:02

我可以参考/加载一个<datalist>从一个单独的文件？

问题描述

1 个解决方案

解决方案1 1 2019-04-16 01:24:02

解决方案1
1 2019-04-16 01:24:02