分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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

让我知道如何在此代码中添加一个下拉列表.

谢谢

解决方法

尝试这样的事情..我不得不稍微改变数据对象的结构.接下来获取下拉列表的值,你可以做.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();