gpt4 book ai didi

javascript使用选择框填充其他选择框

转载 作者:太空宇宙 更新时间:2023-11-03 23:46:18 26 4
gpt4 key购买 nike

我正在尝试创建类似于许多汽车网站(例如 Autotrader)的品牌、型号和年份选择下拉列表。但是,在用户首次选择初始下拉菜单后,我很难让第二个选择下拉菜单进行填充。希望得到建议。

我的 HTML:

<div class="col-md-4">
<select id="make" class="form-control">
<option>Make</option>
<option>Chevrolet</option>
<option>Ford</option>
<option>GMC</option>
<option>Toyota</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4 mob">
<select id="models" class="form-control models" disabled>
<option>Model</option>
<option>Silverado</option>
<option>Suburban</option>
<option>Tahoe</option>
</select>
</div>
</div>

我的javascript:

//setup arrays
Chevrolet = ['Silverado','Suburban','Tahoe'];
Ford = ['F150','Taurus','Pinto','Bronco'];
Toyota = ['Camry','Tacoma','4Runner'];
GMC = ['blah1','blah2','blah3'];

$('#make').change(function() {
$('#models').prop('disabled', true);
$("#models").html(""); //clear existing options

var newOptions = window[this.value]; //finds the array w/the name of the selected value
//populate the new options
for (var i=0; i<newOptions.length; i++) {
$("#models").append("<option>"+newOptions[i]+"</option>");
}

$('#models').prop('disabled', false); //enable the dropdown
});

这是我的 jsfiddle:http://jsfiddle.net/rynslmns/W9TLT/

最佳答案

您没有在您的 fiddle 中包含 jquery。

就是说,您不应该真正使用全局变量,而是创建您自己的对象并稍微修改您的代码:

$(function(){    
//setup arrays
var cars = {
"Chevrolet" : ['Silverado','Suburban','Tahoe'],
"Ford" : ['F150','Taurus','Pinto','Bronco'],
"Toyota" : ['Camry','Tacoma','4Runner'],
"GMC" : ['blah1','blah2','blah3']
};

$('#make').change(function() {
$("#models").html(""); //clear existing options
var newOptions = cars[this.value]; //finds the array w/the name of the selected value
//populate the new options
for (var i=0; i<newOptions.length; i++) {
$("#models").append("<option>"+newOptions[i]+"</option>");
}
$('#models').prop('disabled', false); //enable the dropdown
});
});

http://jsfiddle.net/W9TLT/10/

另一个注意事项。在代码开头禁用下拉菜单然后在代码末尾启用它除了启用下拉菜单外没有任何效果。由于浏览器/javascript 的单线程特性,禁用从未真正发生过。重要的是代码完成时设置的内容。

关于javascript使用选择框填充其他选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21466607/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com