使用javascript从csv文件创建并填充select元素

在csv文件中循环时有点问题。我也不确定是否有更简单的方式加载文本文件。我知道for each循环有意义，但我不确定csv文件中的单个项目。我需要整行文本，并将这两段文本指定给选项的值和选项部分。有没有清理这个的建议

*更新包含以下建议。无错误，但创建的元素未被我的CSS文件捕获，因此格式设置已关闭，选择框仅显示空白

<script>
             function processCSV(file,parentNode)
             {
                var frag = document.createDocumentFragment()
                , lines = file.split('\n'), option;                 

                for (var i = 0, len = lines.length; i < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }
                plant_select.appendChild(frag);
             }

             var plant_select = document.createElement("select");  
             var intial_option = document.createElement("option");
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();

             plant_select.setAttribute("class", "selectbox");   
             plant_select.setAttribute("id", "plant_select");
             intial_option.setAttribute("value","")
             intial_option.setAttribute("disabled","disabled")
             intial_option.setAttribute("selected","selected")
             intial_option.innerHTML = "Please select a Plant";
             plant_select.appendChild(intial_option)

             xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true);
             xmlhttp.send();


             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select);
                }
             }
        </script>

函数processCSV（文件，父节点）
{
var frag=document.createDocumentFragment（）
，line=file.split（'\n'），选项；
对于（变量i=0，len=lines.length；i

假设显示文本是CSV中的第一个元素，值为第二个，并且您知道您的CSV格式正确

var dflines = datafile.split("\n");
for (var i=0; i<dflines.length; i++) {
    dflines[i] = dflines[i].split(",");
    plant_select.options[plant_select.options.length+1] = new Option(dflines[i][0],dflines[i][1],false,false);
}

var-dflines=datafile.split（“\n”）；
对于（var i=0；i，您需要在这里做很多事情：


您需要正确处理文本。不要在字符串或数组上使用
for…in
。这不是您希望它执行的操作。而是将文件拆分为一个行数组并处理这些行
在处理循环中，每次运行都要修改DOM。这会导致不必要的回流和重新绘制。相反，请使用
在回调中需要处理代码，最好是在回调中调用的函数中

因此，您的处理功能：

    function processCSV(file,parentNode){
      var frag = document.createDocumentFragment()
        , lines = file.split('\n')
        , option
        ;
      for (var i = 0, len = lines.length; i < len; i++){
        option = document.createElement("option");
        option.setAttribute("value", "Choice"); 
        frag.appendChild(option);
      }
      parentNode.appendChild(frag);
    }

这不会进行任何每行处理，但我需要您提供更多信息以提供帮助。您可能希望通过逗号拆分并查看单个数据项，这可以通过
processCSV
函数中的嵌套循环来完成。
您的for循环需要在回调中。哦，您可能希望为op设置文本选项，否则它们都是相同的，并且在视觉上是空白的。新选项（“文本”、“值”）在这方面比createElement更方便…好吧，很好，这要紧凑得多。我现在正在做的快速跟进是为此目的打开文件的最佳方式吗？我可能会让您的服务器端语言将其编码为Javascript变量，只要CSV是静态的。如果它是动态的，请将其编码为JSON，然后使用JQuery加载。这是这样做非常容易（PHP-
打印“var data=”。json_encode（$array）。“；”
。如果可能，应避免在客户端运行任何类型的请求（静态数据或可能以不同方式包含），只是为了避免编码的复杂性。哇，非常感谢！！！这基本上取代了我的代码。我将尝试将其折叠到我得到的内容中。可能有一两个问题需要后续讨论，lines=file.split（“\n”），option；正在为我提供语法error@TheCodeNovice在该行之前的行上意外出现分号。在编辑中删除。按照现在的设置。是否有任何特定的方式需要设置CSV。代码可以工作，但“我的文本框”不显示选项。它类似于用空格填充，正确数量的空格，但是空格。我可以您是否可以设置一个JSFIDLE，以便我可以看到当前状态下的代码？
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status==200 && xmlhttp.readyState==4){
    processCSV(xmlhttp.responseText, plant_select);
  }
}