javascript - 使用 Javascript 根据 2 个值查找 CSV 中的特定行

Question

我正在尝试使用 HTML/PHP/Javascript 从 CSV 文件中搜索、查找和获取一些数据。 我想制作一个包含 2 个下拉列表的表单，一个用于 FROM 区域名称，一个用于 TO 区域名称，并使用区域代码(102、104、105 等)作为下拉项的值。

用户选择 FROM 和 TO 后，我想在最右侧显示单个数字(第 5 栏)。

示例:用户选择“Zone1”到“Zone4”，则应返回数字“4”。

FromZoneCode;FromZoneName;ToZoneCode;ToZoneName;Distance;;;;
101;zone1;101;zone1;1;;;;
101;zone1;104;zone4;4;;;;
101;zone1;105;zone5;5;;;;
104;zone4;101;zone1;4;;;;
104;zone4;105;zone5;2;;;;
104;zone4;104;zone4;1;;;;

我试图寻找解决方案，但我似乎找不到正确的信息。

Answer 1

经过很长时间的锻炼:

不知道您如何获取 CSV 数据。在下面的例子中，我是通过ajax请求获取的。

1. 不需要 jQuery。
2. 动态创建下拉菜单。
3. 设置变量delimeter至; (或),根据需要，因为大多数 CSV 文件都包含 CSV 分隔符。
4. 给出要在变量 dropdownname1 中创建下拉列表的列的名称和dropdownname2 .
5. 给出要在变量 resultname 中更改下拉列表时显示的结果的列的名称.
6. 创建 <span>元素为 id="result"在 HTML 中显示结果。
7. 变量keys包含列名称。

8. 变量 values包含数组数组作为值。

   var data = [];
   $.ajax({
       url:"/Users/Default/Downloads/test.csv",
       type:"GET",
       datatype:"csv",
       success:function(response){
           data = response.split(/\r\n/);
           start();
       }
   });
   
   //Logic starts here
   //Initializations
   var keys = [], values = [], delimiter = ";";
   var dropdownname1 = "FromZoneName", dropdownname2 = "ToZoneName", resultname = "Distance";
   var resultelem = document.getElementById("result");
   
   //Functionalities
   function createDropdown(field)
   {
       function createOption(option, isselected)
       {
           var optionelem = document.createElement("option");
           optionelem.value=option;
           optionelem.text=option;
           optionelem.selected = isselected;
           return optionelem;
       }
       var selectelem = document.createElement("select");
       selectelem.setAttribute("id",field);
       var insertedoptions = [];
       for(var i=0;i<values.length;i++)
       {
           var option = values[i][keys.indexOf(field)];
           if(insertedoptions.indexOf(option) == -1)
           {
               insertedoptions.push(option);
               selectelem.appendChild(createOption(option));
           }
       }
       selectelem.appendChild(createOption("",true));
       return selectelem;
   }
   
   function start()
   {
       keys = data.splice(0,1)[0].split(delimiter);
       values = [];
       for(var i=0,n=data.length;i<n;i++)
       {
           values.push(data[i].split(delimiter));
       }
       var bodyelem = document.getElementsByTagName("body")[0];
       bodyelem.appendChild(createDropdown(dropdownname1));
       bodyelem.appendChild(createDropdown(dropdownname2));
       document.getElementById(dropdownname1).addEventListener("change",displayData);
       document.getElementById(dropdownname2).addEventListener("change",displayData);
   }
   
   function displayData()
   {
       var selectelem1 = document.getElementById(dropdownname1), selectelem2 = document.getElementById(dropdownname2);
       var selectedvalue1 = selectelem1.value, selectedvalue2 = selectelem2.value;
       for(var i=0,n=values.length;i<n;i++)
       {
           if(values[i][keys.indexOf(dropdownname1)] == selectedvalue1 && values[i][keys.indexOf(dropdownname2)] == selectedvalue2)
           {
               resultelem.innerHTML=values[i][keys.indexOf(resultname)];
               break;
           }
           else
           {
               resultelem.innerHTML="";
           }
       }
   }