Find specific line in CSV based on 2 values with Javascript

Worked out after a long time:

Don't know how you got the CSV data. In the following example, I got it by an ajax request.

1. No jQuery needed.
2. Created the dropdowns dynamically.
3. Set the variable delimeter to ; (or) , as required, because most CSV files contains CSV delimeter.
4. Give the names of the columns for which dropdowns to be created in the variables dropdownname1 and dropdownname2.
5. Give the name of the column to be displayed as result on chaning dropdowns in the variable resultname.
6. Create a <span> element with id="result" in the HTML to display the result.
7. Variable keys contains column names.

8. Variable values contains array of arrays as 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="";
           }
       }
   }