我想创建两个下拉列表,类别和项目.
如果我选择一个名为car的类别,那么项目下拉列表应该包含Honda,Volvo,Nissan.
如果我选择一个名为phone的类别,那么项目下拉列表应该有这个iPhone,三星,诺基亚.
我怎样才能做到这一点？
我知道我不能用纯HTML做到这一点.
解决方法
工作演示
http://jsfiddle.net/kasperfish/r7MN9/3/(与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.
07001
cars=new Array("Mercedes",'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>');
});
}