根据其他下拉列表的选择填充一个下拉列表

小编典典

根据其他下拉列表的选择填充一个下拉列表

html

我想创建两个下拉列表，类别和项目。

如果我选择名为car的类别之一，则项目下拉列表应包含Honda，Volvo和Nissan。

如果我选择一个名为phone的类别，则项目下拉列表应具有此iPhone，Samsung，Nokia。

我怎样才能做到这一点？我知道我无法使用纯HTML做到这一点。

阅读 293

2020-05-10

共1个答案

小编典典

工作演示
（带有jquery）

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

populateSelect();

$(function() {

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

}

更新：使用eval（）能够添加所需的任意数量的数组。

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
names=new Array('Kasper','Elke','Fred','Bobby','Frits');
colors=new Array('blue','green','yellow');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');

       eval(cat).forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

2020-05-10