如何读取本地服务器CSV文件填充下拉框并解决$.csv.toArray报错问题

DevOps 小满

2026-9-27

解决方案

报错原因

你遇到的TypeError: Cannot read properties of undefined (reading 'toArray')报错，是因为$.csv是jQuery第三方CSV解析插件提供的能力，你没有在页面中引入该插件，所以$.csv为undefined，调用其方法就会抛出该错误。

修复方案

方案1：继续使用jQuery CSV插件

把jQuery CSV插件的源码下载到本地项目中
在页面中按顺序引入依赖，注意必须先引入jQuery，再引入CSV插件：

<!-- 引入本地jQuery文件 -->
<script src="./jquery.min.js"></script>
<!-- 引入本地jQuery CSV插件文件 -->
<script src="./jquery.csv.min.js"></script>

修正原有逻辑的问题：
- 下拉框选择器要加ID标识#，原$('custnum')改为$('#custnum')
- 下拉填充逻辑必须放在$.get的回调函数内部，避免异步请求还未返回就操作空数据

方案2：无额外依赖实现（更适合简单CSV场景，不需要引入第三方插件）

不需要额外安装插件，自己写简单的CSV解析逻辑即可，完整代码如下：

$(function() {
  // 请求CSV文件
  $.get("/data/test1.csv", function(CSVdata) {
    // 拆分CSV为行数组，过滤空行
    const rowList = CSVdata.split('\n').filter(row => row.trim().length > 0);
    const dropdown = $('#custnum');
    // 遍历行生成选项，如果你的CSV有表头，就把i初始值改为1跳过表头
    for (let i = 0; i < rowList.length; i++) {
      // 按逗号拆分每行的字段，可根据你的CSV实际分隔符调整
      const colList = rowList[i].split(',');
      // 假设第一列是option的value，第二列是展示文本，可根据你的CSV结构调整
      const option = $('<option>').val(colList[0]).text(colList[1] || colList[0]);
      dropdown.append(option);
    }
  }).fail(() => {
    console.error('CSV文件读取失败，请检查文件路径是否正确');
  });
});