如何从文本文件创建HTML选择下拉列表

问题描述

我有一个文本文件，如下所示：水果，大小，颜色

我希望能够加载文本文件并从中创建动态选择下拉列表。

这是我目前的代码，无法正常工作。它没有在浏览器控制台中打印任何内容，在选择下拉列表中也没有任何内容。有人可以告诉我我做错了吗？

下面是代码，我使用把手将页面呈现给用户。

<!DOCTYPE html>

<html>


 <head>
   <form method="post" action="index/display" id = "first" name="first">
  <title>AUTOSELECTEST</title>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
      $.get(js/pytxt.txt",function(data) {

        alert( "Data Loaded: " );
        console.log('start processing text')
        console.log(data); /* Open the console too see the data */
        var options = data.split(','),/* Something to "explode" by. See link. */
          $select = $('select#value');
          for (var i = 0; i < options.length; i++) {
          $select.append('<option value="' + i + '">' + options[i] + '</option>"');
        console.log ($select)
      });
  </script>
</head>

<body>
  <div id="page-wrap">
    <h1>Pulls from text files</h1>
    <select id="value">
                <option selected value="base">Please Select</option>
            </select>

  </div>
</body>

</html>

解决方法

我已经调试了代码，请在下面尝试

<!DOCTYPE html>

<html>


 <head>
  <title>AUTOSELECTEST</title>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
        $.get(/public/js/pytxt.json",function(data,error) {
                if (error) {
                      console.log (error);
                  }
                alert( "Data Loaded: " );
                console.log('start processing text')
                console.log(data); /* Open the console too see the data */
                var options = JSON.parse(data);
                /* Something to "explode" by. See link. */
                for (i in options) {
                  $("#value").append('<option value="' + options[i] + '">' + i + '</option>');
                }
      });
  </script>
</head>

<body>
  <div id="page-wrap">
    <h1>Pulls from text files</h1>
    <select id="value">
                <option selected value="base">Please Select</option>
            </select>

  </div>
</body>

</html>

express-handlebars html javascript