Javascript 通过从下拉列表中选择，启用另一个下拉列表

我正在尝试建立一个类似于所有在线汽车经纪人的表格，如autotrader等。我的意思是，我想选择“Make”、“Model”和“Year”。我希望禁用车型和年份，直到用户选择其车辆的“品牌”，从而从“品牌”中获取值，并将“车型”选择框更改为仅适用于该品牌的车型。然后“年”也是一样，等等

            <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>

---

我已经开始了一个基本的JSFIDLE

您可以做以下两件事之一：

您可以在javascript中设置一些预先填充了值的数组 您可以向服务器编写一些ajax调用，这些调用将根据数据库所保存的内容检索值。 下面是一个实现第一个方法的示例，这可能是一个很好的起点

我没有美化它，也没有使用缓存DOM选择、本地化变量等所有最佳实践。但它可以满足您的需要，您可以稍微使用它

---

注意：这是奎师那小提琴的延伸，所以要感谢他把第一部分设置好了。然而，我想我已经添加了您真正想要的部分。

检查这个答案：我不确定这就是我想要的。。对于本例，每个品牌将有4组模型。选择make（即雪佛兰）时，下一个选择框中将仅显示该模型组。我只需要知道如何根据用户选择的“make”来隐藏“model”选择框中的选项。因此，您需要使用ajax调用服务器端方法和所选项目，并使用ajax调用结果更新下一个选择框。正是我想要的。如果我想将它嵌入到我当前的html中，我会在它周围添加标记吗？当我将代码放入html的头部时，javascript不起作用。我完全按照JSFIDLE的结果页面复制了它。有什么建议吗？您是否为HTML元素提供了适当的ID？品牌和型号？把上面的代码放在jQuery条目之后？我在上面输入了代码。我认为这可能与最初的函数调用有关，但我只是在学习js基础知识，所以我不确定。

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