Dynamic drop down <option> elements from imported file

22 Views Asked by At

I am trying to get back into programming after doing a website with some javascript examples. Here I am trying to create a drop down dynamically from the first words of a text file's lines:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <pre id="pre"></pre>
    <form>
      <select id="select" name="selectLine"></select>
    </form>
  </body>
  <script>
    fetch("route.cfg")
      .then((res) => res.text())
      .then((text) => {
        var lines = text.split("\n");
        for (var i = 3; i < lines.length; i++) {
          var regex = new RegExp("^.*?(?==)", "g");
          var result = regex.exec(lines[i]);
          if (result != null) {
            var optionsToAdd = document.createTextNode(
              "<option>" + result + "</option>\n"
            );
            var preElement = document.getElementById("pre");
            var selectElement = document.getElementById("select");
            preElement.appendChild(optionsToAdd);
            selectElement.innerHTML = optionsToAdd;
          }
        }
      })
      .catch((e) => console.error(e));
  </script>
</html>

To test the output I have put it into a <pre> but I can't seem to get it into the <select> properly...I have tried various combinations of creating the option element etc but nothing seems to work, clearly I am missing something.

Thanks in advance

0

There are 0 best solutions below