3下拉列表根据另一个中的选择进行填充

我是Java脚本的新手。 在这里，我有2个下拉小提琴的工作示例。

HTML：

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($(""). // 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($(""). // 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

尝试这样的事情..我不得不稍微改变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($(""). // 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($(""). // 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($(""). // Add options attr("value", third). text(third)); } $c.change(); }).change(); 

检查小提琴