[英]Populate 3 consecutive dropdown lists based on the selection of other dropdown lists html and javascript araray
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. 因此,我是JavaScript的新手,我已经找到了大约100种不同的教程,它们基于对第一个下拉列表的选择来动态更新第二个下拉列表,但是我正在努力寻找一种添加第三个动态更新列表的方法。
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. 我正在尝试修改一个jsfiddle ,它使您可以从第一个下拉列表中选择“电话”,然后使用电话类型来更新第二个下拉列表。 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: HTML:
<select id="cat">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="item">
</select>
<select id="plan">
</select>
JavaScript: 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! 谢谢!
您只是忘了在项目更改时调用populateSelect1方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.