3 danh sách thả xuống Dân cư dựa trên lựa chọn trong [Trình đơn thả xuống khác]

Question

Tôi mới sử dụng tập lệnh Java. Ở đây tôi có ví dụ làm việc cho 2 thả xuống 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 

Hãy cho tôi biết làm thế nào để thêm một giọt nữa xuống trong mã này.

Cảm ơn

Answer 1

Hãy thử một cái gì đó như thế này .. Tôi đã có một chút thay đổi cấu trúc của đối tượng data. Tiếp theo để có được những giá trị của danh sách thả xuống bạn chỉ có thể làm .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