Блог

Главная - Вопросы по программированию - Могу ли я ссылаться / загружать из отдельного файла?

Могу ли я ссылаться / загружать из отдельного файла?

#javascript #html #html-datalist

#javascript #HTML #html-datalist

Вопрос:

Я создаю расширение Google Chrome, которое в основном представляет собой просто выпадающее меню и поле ввода с данными. Изменение выбора в выпадающем меню изменяет, какой datalist использует поле ввода. У меня около сотни списков данных, и некоторые из них имеют тысячи опций. Я ищу способ сократить время загрузки 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:

Вы можете создавать массивы в JavaScript, содержащие ваши различные списки данных. При необходимости они могут быть размещены в отдельном файле и связаны с тегом script . Приведенный ниже фрагмент показывает массивы, определенные локально, поскольку внешний файл не существует для этого фрагмента. При выборе типа питания соответствующий массив можно использовать для создания новых элементов DOM для datalists:

 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>