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

Question

因此，我是JavaScript的新手，我已经找到了大约100种不同的教程，它们基于对第一个下拉列表的选择来动态更新第二个下拉列表，但是我正在努力寻找一种添加第三个动态更新列表的方法。

我正在尝试修改一个jsfiddle ，它使您可以从第一个下拉列表中选择“电话”，然后使用电话类型来更新第二个下拉列表。 如果要添加某个电话，我想添加一项功能，可以根据计划动态更新第三个下拉菜单。 如果可以使用数组更新每个列表，那将是很好的，但这不是必须的。 到目前为止，这是我得到的：

HTML：

<select id="cat">
    <option val="car">car</option>
    <option val="phone">phone</option>
</select>

<select id="item">

</select>

<select id="plan">

</select> 

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>');
        });
    }

}

谢谢！

Answer 1

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