根據其他下拉列表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方法。