使用 javascript 从 csv 文件中创建和填充选择元素

Create and populate select element from csv file using javascript

本文关键字：填充 选择 元素 创建 javascript csv 文件 使用      更新时间：2023-09-26

循环浏览csv文件时遇到一点问题。我也不确定是否有更简单的加载文本文件的方法。我知道每个循环都有意义，但我不确定 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>

您需要在此处执行许多操作：

  • 您需要正确处理文本。不要对字符串或数组使用 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);
    }

然后你的 XHR 回调：

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

这不会进行任何每行处理，但我需要您提供更多信息才能在那里提供任何帮助。您可能希望按逗号拆分并查看单个数据项，您可以使用 processCSV 函数中的嵌套循环来完成此操作。

假设显示文本是第一个元素，值为 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);
}

将向当前选择添加新的选择选项。

相关文章：