title: <select> dropdown menu to target files that javascript opens
body: <p>so I'm parsing CSV files into JSON then editing them so I can get arrays which jquery will use to make a graph.</p>
  
  <p>I'm trying to make a dropdown menu so the user can select a CSV file from which the graph will be made. So far I've worked with local files so I used {}. I am new to jquery and a beginner in html so please explain what's going on in the solutions.</p>
  
  <p>edit: the files directory is "CSV/Sheet1.csv", Sheet2.csv...  </p>
  
  <p>One way to do this is to write a function which opens a specific file when the dropdown menu is selected, but I'd rather just have a single function that takes input from my menu.</p>
  
  <p>here's my html, style sheet and the javascript I want it linking to.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function handleFileSelect(evt) {
      if ( !(evt.target &amp;&amp; evt.target.files &amp;&amp; evt.target.files[0]) ) {
          return;
      }    
      Papa.parse(evt.target.files[0], {
          header: true,
          dynamicTyping: true,
          delimiter: ";",
          complete: function (results) {
              debugDataset(results);
              renderDataset(results);
          }
      });
  }
  
  function debugDataset(dataset) {
      var formatted = JSON.stringify(dataset, null, 2);
   }
  
  function renderDataset(dataset) {
      var raw_data = dataset;
      var formatted_data = {};
  
      for(var i in raw_data.data) {
    var keys = Object.keys(raw_data.data[i]);
    for(var k = 0, len = keys.length; k &lt; len; k++) {
      if(typeof formatted_data[keys[k]] !== "undefined") {
        formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
      } else {
        formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]]);
      }
    }
  }
  console.log(formatted_data);
  }
  
  $(function () {
      $("#csv-file").change(handleFileSelect);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.graphbox {
      width:500px;
      height:500px;
      
      border:1px solid black;
      padding:5px;
      
      margin:auto;
  }
  .dropdownmenubox {
      width:500px;
      height:23px;
      
      margin:auto;
      
      border:1px solid black;
      padding:5px;
  }
  
  .dropdownmenu {
      width:500px;
      margin:auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;grafi revije&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          
          &lt;script src="js/libs/jquery/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="js/libs/PapaParse/papaparse.js"&gt;&lt;/script&gt;
          &lt;script src="index.js"&gt;&lt;/script&gt;
          
          &lt;link type="text/css" rel="stylesheet" href="index.css"/&gt;
          
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="graphbox"&gt;&lt;/div&gt;   
          &lt;div class="dropdownmenubox"&gt;
              &lt;select class="dropdownmenu"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
                  &lt;option value="11"&gt;11&lt;/option&gt;
                  &lt;option value="12"&gt;12&lt;/option&gt;
                  &lt;option value="13"&gt;13&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;    
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>