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