Question

I have a requirement where I can use JS Fiddle dropdown to populate States and Cities.
I have data in an excel sheet like this

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

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

Answer 1

Convert the file into JSON data for easy access — the data shouldn’t change very often, so this shouldn’t be a problem. You can then load this via AJAX:

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

…or something like that.