3 dropdown Füllen basierend auf der Auswahl in einem anderen [Cascading dropdown]

Question

Ich bin neu in Java-Skript. Hier habe ich Arbeitsbeispiel für 2 Dropdown 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 

Lassen Sie mich wissen, wie unten in diesem Code ein weiterer Tropfen hinzuzufügen.

Dank

Answer 1

Try so etwas .. Ich hatte ein wenig die Struktur des data Objekts zu ändern. Weiter, um den Wert der Dropdown-Liste erhalten Sie nur .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