dropdown menu to target files that javascript opens

问题

so I'm parsing CSV files into JSON then editing them so I can get arrays which jquery will use to make a graph.

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.

edit: the files directory is "CSV/Sheet1.csv", Sheet2.csv...

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.

here's my html, style sheet and the javascript I want it linking to.

function handleFileSelect(evt) {
    if ( !(evt.target && evt.target.files && 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 < 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);
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>grafi revije</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/libs/jquery/jquery.js"></script>
        <script src="js/libs/PapaParse/papaparse.js"></script>
        <script src="index.js"></script>
        
        <link type="text/css" rel="stylesheet" href="index.css"/>
        
    </head>
    <body>
        <div class="graphbox"></div>   
        <div class="dropdownmenubox">
            <select class="dropdownmenu">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
            </select>
        </div>    
    </body>
</html>

回答1:

so the solution I'm currently using is this, and it works:

<!DOCTYPE html>
<html>
    <head>
        <title>grafi revije</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/jquery.js"></script>
        <script src="js/papaparse.js"></script>
                
        <link type="text/css" rel="stylesheet" href="index.css"/>
        
    </head>
    <body>
        <div class="graphbox"></div>   
        <div class="dropdownmenubox">
            <select name="CSV">
                <option value="CSV/Sheet1.csv">1</option>
                <option value="CSV/Sheet2.csv">2</option>
                <option value="CSV/Sheet3.csv">3</option>
                <option value="CSV/Sheet4.csv">4</option>
                <option value="CSV/Sheet5.csv">5</option>
                <option value="CSV/Sheet6.csv">6</option>
                <option value="CSV/Sheet7.csv">7</option>
                <option value="CSV/Sheet8.csv">8</option>
                <option value="CSV/Sheet9.csv">9</option>
                <option value="CSV/Sheet10.csv" selected="selected">10</option>
                <option value="CSV/Sheet11.csv">11</option>
                <option value="CSV/Sheet12.csv">12</option>
                <option value="CSV/Sheet13.csv">13</option>
            </select>
        </div>        
        <script>
            $( "select" ).change(function () {
            $( "select option:selected" ).each(function() {
            var variable = $(this).val();
            console.log(variable);
            Papa.parse(variable, {
            dynamicTyping: true,
            download: true,            
            complete: function(results) {
            console.log(results);
            }
            });
            });
            })
            .change();               
        </script>
        
    </body>
    
</html>

来源：https://stackoverflow.com/questions/27757384/select-dropdown-menu-to-target-files-that-javascript-opens

标签

javascript

jquery

html

jquery-selectors

<select> dropdown menu to target files that javascript opens

问题

回答1: