根据选择的其他下拉列表html和javascript araray填充3个连续的下拉列表

所以我是JavaScript新手，我发现了大约100个关于根据第一个下拉列表的选择动态更新第二个下拉列表的不同教程，但我很难找到添加第三个动态更新列表的方法

我有一个我正在尝试修改的选项，允许您从第一个下拉列表中选择“电话”，然后用电话类型更新第二个下拉列表。我想增加的能力，动态更新第三个下拉与计划，如果某个电话被添加。如果我可以使用数组来更新每个列表就好了，但这不是必须的。以下是到目前为止我得到的信息：

Html:

JavaScript:

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
plans=new Array('Sprint', 'Verizon','T-Molbile');

populateSelect();

$(function() {
      debugger;  
      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){

    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='car'){
        cars.forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

} 

function populateSelect1(){
    item=$('#item').val();
    $('#plan').html('');


    if(item=='IPhone'){
        plans.forEach(function(t) { 
            $('#plan').append('<option>'+t+'</option>');
        });
    }

}

---

谢谢

您只是忘记了在项目更改时调用populateSelect1方法。

以下是链接：

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
plans=new Array('Sprint', 'Verizon','T-Molbile');

populateSelect();

$(function() {
      debugger;  
      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){

    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='car'){
        cars.forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

} 

function populateSelect1(){
    item=$('#item').val();
    $('#plan').html('');


    if(item=='IPhone'){
        plans.forEach(function(t) { 
            $('#plan').append('<option>'+t+'</option>');
        });
    }

}