Javascript多级下拉链接

Question

I'm a bit of a noob but I know some stuff. I recently found this Fiddle Example

var data = [ // The data
['ten', [
    'eleven','twelve'
]],
['twenty', [
    'twentyone', 'twentytwo'
]]
];

I've added quite a few more options to my own code and I'm wondering how to make it so when someone chooses their second option it links to some place. Example, First drop down has Provinces (Ontario) then the second has cities (Toronto) when someone picks Toronto, I want it to go some place.

Can this be done with this code or do I need to create some sort of go button (which I think I'd rather go with)?

** Edit **

Here is my code, I know it's not pretty but it seems to be working, I'd just like it so someone would choose, lets' say, Alberta then it shows the cities in the next dropdown and they choose Red Deer. A go button would be nice but not needed if it would make things easier. But once they choose Red Deer, I'd like it to go to whatever link I'd like ie WordPress category.

    jQuery(function($) {

var data = [ // The data
    ['Select Province', [
        'Select City'
    ]],
    ['Alberta', [
        'Select City', 'Airdrie', 'Calgary', 'Cold Lake', 'Edmonton', 'Fort Saskatchewan', 'Grande Prairie', 'Leduc', 'Lethbridge', 'Medicine Hat', 'Red Deer'
    ]],
    ['British Columbia', [
        'Select City', 'Abbotsford', 'Burnaby', 'Chilliwack', 'Coquitlam', 'Kamloops', 'Langley', 'Nanaimo', 'New Westminister', 'North Vancouver', 'Port Coquitlam', 'Port Moody', 'Prince George', 'Richmond', 'Surrey', 'Vancouver', 'Vernon', 'Victoria'
    ]],
    ['Manitoba', [
        'Select City', 'Brandon', 'Dauphin', 'Flin Flon', 'Morden', 'Portage la Prairie', 'Selkirk', 'Steinbach', 'Thompson', 'Winkler', 'Winnipeg'
    ]],
    ['New Brunswick', [
        'Select City', 'Bathurst', 'Campbellton', 'Dieppe', 'Edmundston', 'Fredericton', 'Miramichi', 'Moncton', 'Saint John'
    ]],
    ['Newfoundland and Labrador', [
        'Select City', 'Corner Brook', 'Mount Pearl', 'St. Johns'
    ]],
    ['Northwest Territories', [
        'Select City', 'Fort Simpson', 'Inuvik', 'Sachs Harbour', 'Yellowknife'
    ]],
    ['Nova Scotia', [
        'Select City', 'Amherst', 'Cape Breton', 'Glace Bay', 'Halifax', 'Kentville', 'New Glasgow', 'Sydney Mines', 'Truno'
    ]],
    ['Nunavut', [
        'Select City', 'Alert', 'Eureka', 'Iqaluit'
    ]],
    ['Ontario', [
        'Select City', 'Barrie', 'Belleville', 'Brampton', 'Brant', 'Brantford', 'Brockville', 'Burlington', 'Cambridge', 'Cornwall', 'Elliot Lake', 'Guelph', 'Haldimand County', 'Hamilton', 'Kawartha Lakes', 'Kenora', 'Kingston', 'Kitchener', 'London', 'Markham', 'Mississauga', 'Niagara Falls', 'Norfolk County', 'North Bay', 'Orillia', 'Oshawa', 'Ottawa', 'Owen Sound', 'Peterborough', 'Pickering', 'Quinte West', 'Sarnia', 'Sault Ste. Marie', 'St. Catherines', 'St.Thomas', 'Stratford', 'Sudbury', 'Thunder Bay', 'Timmons', 'Toronto', 'Vaughan', 'Waterloo', 'Welland', 'Windsor', 'Woodstock'
    ]],
    ['Prince Edward Island', [
        'Select City', 'Charlottetown', 'Summerside'
    ]],
    ['Quebec', [
        'Select City', 'Alma', 'Baie-Comeau', 'Beaconsfield', 'Beloeil', 'Blainville', 'Boisbriand', 'Gatineau', 'Laval', 'Longueuil', 'Lévis', 'Montreal', 'Quebec City', 'Repentigny', 'Saguenay', 'Saint-Jean-sur-Richelieu', 'Sherbrooke', 'Terrebonne', 'Trois-Rivières'
    ]],
    ['Saskatchewan', [
        'Select City', 'Estevan', 'Lloydminster', 'Moose Jaw', 'Prince Albert', 'Regina', 'Saskatoon', 'Swift Current', 'Yorkton'
    ]],
    ['Yukon', [
        'Select City', 'Carmacks', 'Dawson City', 'Faro', 'Haines Junction', 'Mayo', 'Teslin', 'Watson Lake', 'Whitehorse'
    ]]
];

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

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][1]; // 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
    });

Answer 1

Try adding this to your code:

var links = [['http://www.eleven.com', 'http://www.twelve.com'],
             ['http://www.twentyone.com', 'http://www.twentytwo.com']]

$b.delegate('option', 'click', function() {
    var a = $a.children('option:selected').data('sel');
    var b = $(this).data('sel');
    document.location.href = links[a][b];
});

Note that I used delegate() because the Fiddle you linked uses an older version of jQuery that does not have the on() method; with jQuery 1.7+, you can use $b.on('click', 'option', function() { instead: http://jsfiddle.net/4Zw3M/1022/ . And I suspect there's a more elegant way of doing things than the JavaScript shown in the fiddle, but I unfortunately don't have the time to investigate that at the moment.

Answer 2

<select id="level1" onchange="select()"></select>
<select id="level2"></select>

var data = [ // The data
['ten', [
    'eleven', 'twelve']],
    ['twenty', [
        'twentyone', 'twentytwo']]
];
for (i = 0; i < data.length; i++) {
    x = document.getElementById("level1");
    option = document.createElement("option");
    option.text = data[i][0]
    x.add(option, null);
}

function select() {
    x = document.getElementById("level2");
    while (x.hasChildNodes()) {
        x.removeChild(x.childNodes[0])
    }
    ss = document.getElementById("level1").selectedIndex
    for (i = 0; i < data[ss][1].length; i++) {
        option = document.createElement("option");
        option.text = data[ss][1][i]
        x.add(option, i);
    }
}