Populate 3 consecutive dropdown lists based on the selection of other dropdown lists html and javascript araray

Question

So I'm new to JavaScript and I've found about 100 different tutorials about dynamically updating a 2nd drop down list based off the selection of the first drop down but I am struggling to find a way to add a third dynamically updated list.

I have a jsfiddle I am trying to modify which lets you select 'phone' from the first drop down and then updates the second drop down with types of phones. I would like to add the ability to dynamically update a third drop down with plans if a certain phone is added. It would be nice if I could use arrays to update each list, but it isn't a must. Here's what I've got so far:

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

}

Thanks!

Answer 1

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