带有链接的Javascript多级下拉菜单

Question

我有点傻，但我知道一些东西。我最近发现了这个Fiddle示例

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

我在自己的代码中添加了很多选项，我想知道如何制作，这样当有人选择第二个选项时，它就会链接到某个地方。例如，第一个下拉列表有省份（安大略省），然后第二个下拉列表是城市（多伦多）。当有人选择多伦多时，我希望它去一些地方。

这可以用这个代码来完成吗？还是我需要创建某种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()，因为您链接的Fiddle使用的是没有on()方法的jQuery的旧版本；使用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);
    }
}