Question

我有点像菜鸟，但我知道一些东西。我最近发现了Fiddle Example

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

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

可以使用此代码完成此操作，还是需要创建某种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
    });

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()因为你链接的小提琴使用了没有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);
    }
}

Javascript多级下拉链接

2 个答案: