javascript - 使用 jquery/javascript 查找包含标题的 csv 文件

Question

我的查找文件看起来像这样。

APP_FAMILY,APPLICATION
app_fam1,app_name1
app_fam1,app_name2
app_fam2,app_name3
app_fam2,app_name4

我有两个选择字段，如下所示:

这是我要显示“不同的”APP_FAMILY 列值的地方

Select Application Family: <select id="app_family"></select>

这是我要显示与所选 APP_FAMILY 对应的 APPLICATION 列值的地方

Select Application: <select id="app"></select>

现在我希望这两个 select 标记都由查找文件中的 jquery 或 javacript 填充。这就是约束。有人可以建议如何进行吗？

Answer 1

我将在此处使用 jQuery 作为答案。 首先，您需要加载 CSV 文件。然后你解析它，同时构建家庭选择。最后，您需要监听更改并更新应用选择。

$.ajax('/path/to/lookup.csv').done(function(data) {
  data = data.split('\n'); //replace with \r\n if you use Windows line endings
  data.shift(); //remove header

  var families = {},
      $family = $('#app_family'),
      $app= $('#app');
  for (var i = 0; i < data.length; i++) {
    if (!data[i]) {
      continue; //skip empty lines
    }
    var fields = data[i].split(',');
    if (!families.hasOwnProperty(fields[0])) {
      families[fields[0]] = [];
      $family.append('<option value="' + fields[0] + '">' + fields[0] + '</option>');
    }
    families[fields[0]].push(fields[1]);
  }

  //next, fill in app select whenever the selected family changes
  function updateApp() {
    var family = families[$family.val()];
    var html = '';
    for (var i = 0; i < family.length; i++) {
      html += '<option value="' + family[i] + '">' + family[i] + '</option>';
    }
    $app.html(html)
  }
  updateApp();
  $family.change(updateApp);
})

这是一个jsfiddle .