3 dropdown 根据另一个[Cascading dropdown]中的选择填充 [英] 3 dropdown Populate based on selection in another [Cascading dropdown]

问题描述

我是 Java 脚本的新手.在这里，我有 2 个下拉列表 Fiddle 的工作示例.

I am new to Java script. Here I have working example for 2 drop down Fiddle .

HTML:

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

JavaScript:

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

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

Let me know how to add one more drop down in this code.

谢谢

推荐答案

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

Try something like this.. I had to slightly change the structure of the data object. Next to get the value of the dropdown you can just do .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();

检查小提琴

这篇关于3 dropdown 根据另一个[Cascading dropdown]中的选择填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！