我正在尝试建立一个类似于所有在线汽车经纪人(即autotrader等)的表格。我的意思是,我希望选择'Make','Model'和'Year'。我希望模型和年份被禁用,直到用户选择他们的车辆的'make',从而从'make'获取值并将'model'选择框更改为仅用于该make的模型。然后是“年”等同样的事情。
<div class="form-group">
<select id="make" class="form-control">
<option>Make</option>
<option>Chevrolet</option>
<option>Ford</option>
<option>Toyota</option>
<option>GMC</option>
</select>
</div>
<div class="form-group">
<select id="models" class="form-control models" disabled>
<option>Model</option>
</select>
</div>
这是我的javascript。在我的HTML的头部。但是,javascript在我的html文件中无法正常运行。
<script type='text/javascript'>
$(function(){
//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
});
});
</script>
我已经开始了一个基本的jsfiddle。 http://jsfiddle.net/rynslmns/N9XTZ/1/
答案 0 :(得分:1)
你可以做以下两件事之一:
这是一个实现第一个方法的例子,这可能是你开始的好地方。
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 out the existing selections
var newOptions = window[this.value];
//populate the new selections
for (var i=0; i<newOptions.length; i++) {
$("#models").append("<option>"+newOptions[i]+"</option>");
}
//enable the dropdown
$('#models').prop('disabled', false);
});
我没有美化它,也没有使用所有最佳实践(缓存DOM选择,本地化变量等)。但是它可以满足您的需求,您可以稍微使用它。
注意:这是Krishna小提琴的延伸,所以对他的第一部分设置表示赞赏。不过,我想我已经添加了你真正想要的部分。