根据其他下拉列表的选择填充一个下拉列表 [英] Populate one dropdown list based on the selection of other dropdown list

问题描述

如果我选择一个名为car的类别，那么item下拉列表应该有Honda，沃尔沃，日产。

如果我选择其中一个名为phone的类别，那么item下拉列表应该有这款iPhone，三星，Nokia。

我该怎么做？
我知道我不能用纯HTML完成它。

：//jsfiddle.net/kasperfish/r7MN9/3/rel =noreferrer> http://jsfiddle.net/kasperfish/r7MN9/3/ （使用jquery）

  cars = new Array（Mercedes，Volvo，BMW，porche）; 
 phones = new Array（'Samsung'，'Nokia'，'Iphone'）; 
 
 populateSelect（）; 
 $ b $（function（）{
 
 $（'＃cat'）。change（function（）{
 populateSelect（）; 
}） ; 
 
}）; 
 
 
函数populateSelect（）{
 cat = $（'＃cat'）。val（）; 
 $（'＃item'）。html（''）; 
 
 $ b 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（）可以根据需要添加尽可能多的数组。
JSFIDDLE DEMO

  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（）; 
 $ b $（function（）{
 
 $（'＃cat'）。change（function（）{
 populateSelect（）; 
}） ; 
 
}）; 
 
 
函数populateSelect（）{
 cat = $（'＃cat'）。val（）; 
 $（'＃item'）。html（''）; 
 
 eval（cat）.forEach（function（t）{
 $（'＃item'）。append（'< option>'+ t +'< / option>'） ; 
}）; 
} 
  

I want to create two drop down lists, category and item.

If I select one of the categories named car, then item drop down list should have Honda, Volvo, Nissan.

If I select one of the categories named phone, then item drop down list should have this iPhone, Samsung, Nokia.

How can I do this? I know that I can't do it with plain HTML.

解决方案

WORKING DEMO http://jsfiddle.net/kasperfish/r7MN9/3/ (with 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>');
        });
    }

} 

UPDATED: using eval() to be able to add as much arrays as you want. JSFIDDLE DEMO

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

这篇关于根据其他下拉列表的选择填充一个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！