在选择其他下拉列表html和javascript araray的基础上，填充3个连续的下拉列表

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

本文关键字：下拉列表 基础上 填充 连续 3个 javascript 其他 选择 html araray      更新时间：2024-04-03

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

我有一个jsfiddle正在尝试修改，它可以让你从第一个下拉列表中选择"phone"，然后用手机类型更新第二个下拉列表。如果添加了某部手机，我想添加动态更新第三个下拉列表的功能。如果我可以使用数组来更新每个列表，那就太好了，但这不是必须的。到目前为止，我得到的是：

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

谢谢！

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

相关文章：