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方法。

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

1 个答案: