Могу ли я сослаться на / 1000 * из отдельного файла? - PullRequest
Новая
       18

Могу ли я сослаться на / 1000 * из отдельного файла?

2 голосов
/ 16 апреля 2019

Я создаю расширение Google Chrome, которое представляет собой просто выпадающее меню и поле ввода со списками данных.Изменение выбора в раскрывающемся меню изменяет список данных, который используется в поле ввода.У меня есть около ста даталистов, и у некоторых из них есть тысячи вариантов.Я ищу способ сократить время загрузки html-файла (в настоящее время около 930 КБ) и хочу сохранить списки данных в отдельном 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;
});

1 Ответ

1 голос
/ 16 апреля 2019

Вы можете создавать массивы в 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>
...