0

我有点菜鸟，但我知道一些东西。我最近发现了这个小提琴示例

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

2 回答 2

0

尝试将此添加到您的代码中：

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 更优雅的做事方式，但不幸的是，我目前没有时间进行调查。

于 2013-07-26T17:02:51.110 回答
0 
<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);
    }
}
于 2013-07-26T18:00:08.703 回答