<选择>下拉菜单以javascript打开的目标文件为目标

本文介绍了<选择>下拉菜单以javascript打开的目标文件为目标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我将CSV文件解析为JSON，然后对其进行编辑，这样我就可以获取jquery用来制作图形的数组.

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

我正在尝试创建一个下拉菜单，以便用户可以选择要从中创建图形的CSV文件.到目前为止，我已经使用了本地文件，因此我使用了{}.我是jquery的新手，并且是html的初学者，所以请解释解决方案中发生的事情.

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.

文件目录为"CSV/Sheet1.csv"，Sheet2.csv ...

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.

这是我的html，样式表和我希望其链接的javascript.

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>

推荐答案

所以我当前正在使用的解决方案是这样，并且有效:

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>

这篇关于<选择>下拉菜单以javascript打开的目标文件为目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

so

&lt;选择&gt;下拉菜单以javascript打开的目标文件为目标

问题描述

推荐答案

<选择>下拉菜单以javascript打开的目标文件为目标