简体   繁体   English

如何从Excel工作表或.csv文件向jsfiddle下拉列表输入数据?

[英]How to input data to jsfiddle dropdown from an Excel Sheet or .csv file?

I have a requirement where I can use JS Fiddle dropdown to populate States and Cities. 我有一个可以使用JS Fiddle下拉列表填充州和城市的要求。 I have data in an excel sheet like this 我在这样的Excel工作表中有数据

State           City
Andhra Pradesh  Kadapa
Andhra Pradesh  Kadiri
Andhra Pradesh  Kagaznagar
Andhra Pradesh  Kakinada
Andhra Pradesh  Kalyandurg
Andhra Pradesh  Kamareddy
Assam           Karimganj
Assam           Kokrajhar
Bihar           Katihar
Bihar           Kanti
Bihar           Kishanganj
Bihar           Khagaria
Bihar           Kharagpur
Chhattisgarh    Kawardha
Chhattisgarh    Kanker
Chhattisgarh    Korba
Chhattisgarh    Kondagaon
Gujarat         Kapadvanj
Gujarat         Karjan
Gujarat         Kalavad
Gujarat         Kadi
Gujarat         Kalol
Haryana         Karnal
Haryana         Kalan Wali
Haryana         Kaithal

and the js fiddle for populating dropdown is as follows 和用于填充下拉列表的js小提琴如下

--from here I want to input data from excel sheet or CSV or any other better suggestions in place of following code.
var data = [ // The data
    ['ten', [
        'select','eleven','twelve'
    ]],
    ['twenty', [
        'twentyone', 'twentytwo'
    ]]
];
--up to here.-----------------------------------

and now I want to pass the data to the below function 现在我想将数据传递给以下功能

$a = $('#State'); // The dropdowns
$b = $('#City');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][3]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice

and here are the dropdowns 这是下拉列表

<select id=state></select></br>
<select id=city></select>

My concern is how to 我关心的是如何

Convert the file into JSON data for easy access -- the data shouldn't change very often, so this shouldn't be a problem. 将文件转换为JSON数据以便于访问-数据不应该经常更改,因此这不成问题。 You can then load this via AJAX : 然后,您可以通过AJAX加载此文件:

$.getJSON('ajax/cities.json', function(data) {
    var $opt = $("<option>")
       .attr("value",data.city)
       .text(data.state);
    $('#state').append($opt);
});

...or something like that. ...或类似的东西。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在jsfiddle中读取csv文件 - How to read a csv file in jsfiddle 使用Javascript将数据从Excel工作表提取到CSV(或)Json中 - Extracting data from excel sheet into csv (or) Json using Javascript 如何从JavaScript中的Excel工作表中检索数据 - how to retrieve data from excel sheet in javascript 如何通过分离对象的项目符号将对象转换为Excel / csv文件中具有多个工作表的csv文件 - How to convert Object to csv file with a multiple sheet in excel/csv file by separating bullet of Object 如何在没有 header 的 ZCC8D68C551C4A9A9A6D5313E07DE4DEAFDZ 文件中将 append 数据导入 Google 表格 - How do I append data from a CSV file without the header into Google Sheet 如何传递后端数据以显示为多选下拉菜单项(已附加Jsfiddle) - How to pass backend data to display as multiselect dropdown items (Jsfiddle attached) 如何让Jsfiddle读取我的本地csv文件? - How can I get Jsfiddle to read my local csv file? 如何在同一个excel文件中将数据分隔到新工作表 - How can I separate data to new sheet in same excel file 如何将数据从 csv 文件或 excel 文件导出到 javascript ZA8CFDE6331BD59EB2AC66F8911C46B? - How can I export data from a csv file or excel file to a javascript object? 如何从html / css页面的Excel工作表中获取数据? - How to get data from excel sheet in html/css page?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM