Javascript多级下拉链接

Question

我是一个noob，但我知道一些东西。最近，我发现这个Fiddle Example

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

我增加了一些更多的选择，我自己的代码，我想知道如何使它所以当有人选择将其链接到一些地方的第二个选项。例如，当有人选择多伦多时，首先下拉省有安大略省（Ontario），然后第二个有城市（多伦多），我希望它去某个地方。

这可以用这个代码来完成，还是我需要创建某种去按钮（我认为我宁愿去）？

**编辑**

这里是我的代码，我知道这是不漂亮，但它似乎是工作，我只是想它所以有人会选择，让说，阿尔伯塔省则显示在下一个下拉城市，他们选择红鹿。如果它能让事情变得更容易，那么一个go按钮将会很好，但不是必需的。但是一旦他们选择Red Deer，我希望它能够进入我想要的任何链接即WordPress类别。

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

尝试增加给你的代码：

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

请注意，我用delegate()因为你链接的小提琴使用的jQuery的旧版本不具备的on()方法;使用jQuery 1.7+，您可以使用$b.on('click', 'option', function() {代替：http://jsfiddle.net/4Zw3M/1022/。我怀疑有一种更优雅的做事方式，而不是小提琴中显示的JavaScript，但不幸的是我现在没有时间去调查。

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); 
    } 
}