<select> 下拉菜单指向 javascript 打开的文件

Question

所以我将 CSV 文件解析为 JSON，然后对其进行编辑，以便我可以获得 jquery 将用于制作图表的数组。

我正在尝试制作一个下拉菜单，以便用户可以 select 一个 CSV 文件，从中可以制作图表。到目前为止，我一直在处理本地文件，所以我使用了 {}。我是 jquery 的新手，也是 html 的初学者，所以请解释一下解决方案中发生了什么。

编辑：文件目录为 "CSV/Sheet1.csv"、Sheet2.csv...

实现此目的的一种方法是编写一个函数，在 selected 下拉菜单时打开特定文件，但我宁愿只有一个函数从我的菜单中获取输入。

这是我的 html，样式 sheet 和 javascript 我希望它链接到。

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>

Answer 1

所以我目前使用的解决方案是这个，并且有效：

<!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>

<select> 下拉菜单指向 javascript 打开的文件

<select> dropdown menu to target files that javascript opens

html

javascript

jquery

jquery-selectors