带有链接的Javascript多级下拉列表

我有点傻，但我知道一些事情。我最近发现了这个

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

这可以用这段代码来完成吗？或者我需要创建某种go按钮（我想我更愿意使用它）

**编辑**

这是我的代码，我知道它不漂亮，但似乎起作用了，我只是希望有人会选择，比如说，阿尔伯塔省，然后在下一个下拉列表中显示城市，他们选择了马鹿。一个go按钮会很好，但如果它能让事情变得更简单的话，就不需要了。但一旦他们选择了《马鹿》，我希望它能转到我喜欢的任何链接，即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
    });

jQuery（函数（$）{
var data=[//数据
[“选择省”[
“选择城市”
]],
[“阿尔伯塔”[
‘精选城市’、‘艾尔德里’、‘卡尔加里’、‘冷湖’、‘埃德蒙顿’、‘萨斯喀彻温堡’、‘大草原’、‘莱杜克’、‘莱斯布里奇’、‘药帽’、‘马鹿’
]],
[“不列颠哥伦比亚省”[
‘选择城市’、‘阿博茨福德’、‘伯纳比’、‘奇利瓦克’、‘科基特拉姆’、‘坎卢普斯’、‘兰利’、‘纳奈莫’、‘新西部部长’、‘北温哥华’、‘科基特拉姆港’、‘穆迪港’、‘乔治王子’、‘里士满’、‘萨里’、‘温哥华’、‘弗农’、‘维多利亚’
]],
[“马尼托巴省”[
‘精选城市’、‘布兰登’、‘多芬’、‘弗林·弗隆’、‘摩登’、‘波蒂奇大草原’、‘塞尔柯克’、‘斯坦巴赫’、‘汤普森’、‘温克勒’、‘温尼伯’
]],
[“新不伦瑞克”[
“选择城市”、“巴瑟斯特”、“坎贝尔顿”、“迪佩”、“埃德蒙斯顿”、“弗雷德里克顿”、“米拉米奇”、“蒙克顿”、“圣约翰”
]],
[“纽芬兰和拉布拉多”[
“选择城市”、“拐角小溪”、“珍珠山”、“圣约翰”
]],
[“西北地区”[
“精选城市”、“辛普森堡”、“因努维克”、“萨克斯港”、“黄刀”
]],
[“新斯科舍省”[
“精选城市”、“阿默斯特”、“布雷顿角”、“格拉斯湾”、“哈利法克斯”、“肯特维尔”、“新格拉斯哥”、“悉尼矿山”、“特鲁诺”
]],
['Nunavut'[
“选择城市”、“警报”、“尤里卡”、“Iqaluit”
]],
[“安大略省”[
‘精选城市’、‘巴里’、‘贝尔维尔’、‘布兰顿’、‘布兰特’、‘布兰特福德’、‘布罗克维尔’、‘伯灵顿’、‘剑桥’、‘康沃尔’、‘艾略特湖’、‘圭尔夫’、‘哈尔迪曼德郡’、‘汉密尔顿’、‘卡瓦萨湖’、‘凯诺拉’、‘金斯顿’、‘基奇纳’、‘伦敦’、‘马克汉姆’、‘密西沙加’、‘尼亚加拉瀑布’、‘诺福克郡’、‘北湾’、‘奥里亚’、‘奥“，”欧文湾“，”彼得伯勒“，”皮克林“，”昆特韦斯特“，”萨尼亚“，”索尔特圣玛丽“，”圣凯瑟琳“，”圣托马斯“，”斯特拉特福德“，”萨德伯里“，”雷霆湾“，”蒂蒙斯“，”多伦多“，”沃恩“，”滑铁卢“，”威兰“，”温莎“，”伍德斯托克“，”
]],
[“爱德华王子岛”[
“选择城市”、“夏洛特镇”、“萨默赛德”
]],
[“魁北克”[
‘精选城市’、‘阿尔玛’、‘拜科莫’、‘比康斯菲尔德’、‘贝洛伊尔’、‘布雷维尔’、‘博伊斯布兰德’、‘加蒂诺’、‘拉瓦尔’、‘隆圭尔’、‘莱维斯’、‘蒙特利尔’、‘魁北克市’、‘雷维尼’、‘萨格奈’、‘里塞留圣约翰’、‘舍布鲁克’、‘特雷本’、‘特洛伊河’
]],
[“萨斯喀彻温省”[
“选择城市”、“埃斯特万”、“劳埃德明斯特”、“驼鹿下巴”、“阿尔伯特王子”、“里贾纳”、“萨斯卡通”、“急流”、“约克顿”
]],
[‘育空’[
“选择城市”、“卡马克”、“道森城”、“法罗”、“海恩斯枢纽”、“梅奥”、“特斯林”、“沃森湖”、“怀特霍斯”
]]
];
$a=$（'#a'）；//下拉列表
$b=$（“#b”）；
对于（变量i=0；i

尝试将此添加到代码中：

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使用的是较旧版本的jQuery，它没有

on（）

方法；使用jQuery1.7+，您可以使用

$b.on（'click'，'option'，function（）{

：。我怀疑有一种比小提琴上显示的JavaScript更优雅的方式来做事情，但不幸的是，我现在没有时间去研究它。

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

var data=[//数据
[‘十’[
“十一”、“十二”]]，
[‘二十’[
“二十一”、“二十二”]]
];
对于（i=0；i

我强烈建议选择后使用按钮，而不是立即重定向。使用屏幕阅读器的用户（以及其他用户）在做出选择之前，通常会使用键盘滚动浏览选项。由于下拉菜单在值发生任何变化时都会触发

更改

事件，这可能会导致在用户做出最终选择之前发生重定向。类似地，如果用户意外单击错误的选择，他们也会被重定向他们必须驾驶英航

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