jquery之3 下拉菜单根据另一个[级联下拉菜单]中的选择进行填充

我是 Java 脚本新手。这里我有 2 个下拉菜单 Fiddle 的工作示例 .

HTML:

<select id=a></select> 
<select id=b></select> 
<select id=c></select> 

JavaScript:

var data = [ // The data 
    ['ten', [ 
        'eleven','twelve' 
    ]], 
    ['twenty', [ 
        'twentyone', 'twentytwo' 
    ]] 
]; 
 
$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][2]; // 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 

让我知道如何在此代码中添加一个下拉菜单。

谢谢

请您参考如下方法:

尝试这样的事情..我必须稍微改变data对象的结构。接下来要获取下拉列表的值，您只需执行 .val()

var data = { 
    'ten': { 
        'eleven': [11, 1111, 111111], 
        'twelve': [12, 1212, 121212] 
    }, 
    'twenty': { 
        'twentyone': [21, 2121, 212121], 
        'twentytwo': [22, 2222, 222222] 
    } 
}, 
$a = $('#a'); // The dropdowns 
$b = $('#b'); 
$c = $('#c'); 
 
for (var prop in data) { 
    var first = prop; 
    $a.append($("<option>"). // Add options 
    attr("value", first). 
    text(first)); 
} 
 
$a.change(function () { 
    var firstkey = $(this).val(); 
    $b.html(''); // Clear existing options in second dropdown 
    for (var prop in data[firstkey]) { 
        var second = prop; 
        $b.append($("<option>"). // Add options 
        attr("value", second). 
        text(second)); 
    } 
    $b.change(); 
}).change(); // Trigger once to add options at load of first choice 
 
$b.change(function () { 
    var firstKey = $a.val(), 
        secondKey = $(this).val(); 
    $c.html(''); // Clear existing options in second dropdown 
    for(var i = 0; i < data[firstKey][secondKey].length; i++) { 
        var third = data[firstKey][secondKey][i] 
        $c.append($("<option>"). // Add options 
        attr("value", third). 
        text(third)); 
    } 
    $c.change(); 
}).change(); 

<强> Check Fiddle