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

我正在尝试创建一个Make、Model和Year select下拉列表，类似于许多汽车网站，如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>

制作
雪佛兰
河流浅水处
GMC
丰田
模型
西尔瓦多
郊区的
塔霍

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

//设置数组
雪佛兰=['Silverado'、'Suburban'、'Tahoe']；
福特=['F150'，'Taurus'，'Pinto'，'Bronco']；
丰田=[‘凯美瑞’、‘塔科马’、‘4Runner’]；
GMC=['blah1'，'blah2'，'blah3']；
$（'#make'）。更改（函数（）{
$（'#models'）.prop（'disabled'，true）；
$（“#models”）.html（“”；//清除现有选项
var newOptions=window[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i包含jquery。您的示例有效。
包含jquery。您的示例有效。
包含jquery。您的示例有效。
包含jquery。您的示例有效。
您的小提琴没有加载jquery

$('#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
});

$（'#make'）.change（函数（）{
$（'#models'）.prop（'disabled'，true）；
$（“#models”）.html（“”；//清除现有选项
var newOptions=window[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i您的小提琴没有加载jQuery

$('#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
});

$（'#make'）.change（函数（）{
$（'#models'）.prop（'disabled'，true）；
$（“#models”）.html（“”；//清除现有选项
var newOptions=window[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i您的小提琴没有加载jQuery

$('#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
});

$（'#make'）.change（函数（）{
$（'#models'）.prop（'disabled'，true）；
$（“#models”）.html（“”；//清除现有选项
var newOptions=window[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i您的小提琴没有加载jQuery

$('#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
});

$（'#make'）.change（函数（）{
$（'#models'）.prop（'disabled'，true）；
$（“#models”）.html（“”；//清除现有选项
var newOptions=window[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i，您没有将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
    });
});

$（函数（）{
//设置阵列
var cars={
“雪佛兰”：[‘Silverado’、‘郊区’、‘Tahoe’]，
“福特”：['F150'，'Taurus'，'Pinto'，'Bronco']，
“丰田”：[‘凯美瑞’、‘塔科马’、‘4Runner’]，
“GMC”：['blah1'，'blah2'，'blah3']
};
$（'#make'）。更改（函数（）{
$（“#models”）.html（“”；//清除现有选项
var newOptions=cars[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i，您没有将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
    });
});

$（函数（）{
//设置阵列
var cars={
“雪佛兰”：[‘Silverado’、‘郊区’、‘Tahoe’]，
“福特”：['F150'，'Taurus'，'Pinto'，'Bronco']，
“丰田”：[‘凯美瑞’、‘塔科马’、‘4Runner’]，
“GMC”：['blah1'，'blah2'，'blah3']
};
$（'#make'）。更改（函数（）{
$（“#models”）.html（“”；//清除现有选项
var newOptions=cars[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i，您没有将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
    });
});

$（函数（）{
//设置阵列
var cars={
“雪佛兰”：[‘Silverado’、‘郊区’、‘Tahoe’]，
“福特”：['F150'，'Taurus'，'Pinto'，'Bronco']，
“丰田”：[‘凯美瑞’、‘塔科马’、‘4Runner’]，
“GMC”：['blah1'，'blah2'，'blah3']
};
$（'#make'）。更改（函数（）{
$（“#models”）.html（“”；//清除现有选项
var newOptions=cars[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；i，您没有将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
    });
});

$（函数（）{
//设置阵列
var cars={
“雪佛兰”：[‘Silverado’、‘郊区’、‘Tahoe’]，
“福特”：['F150'，'Taurus'，'Pinto'，'Bronco']，
“丰田”：[‘凯美瑞’、‘塔科马’、‘4Runner’]，
“GMC”：['blah1'，'blah2'，'blah3']
};
$（'#make'）。更改（函数（）{
$（“#models”）.html（“”；//清除现有选项
var newOptions=cars[this.value]；//查找带有选定值名称的数组
//填充新选项
对于（var i=0；iYour JSFIDLE不包括jquery库-包括它对包含jquery的更新的meSee有效。另一方面，使用
$（“#模型”）.empty（）
比
$（“#模型”）.html（“”）更快
您的JSFIDLE不包括jquery库-包括它适用于包含jquery的更新。另一方面，使用
$（“#模型”）.empty（）；
比
$（“#模型”）.html（“”）更快
您的JSFIDLE不包括jquery库-包括它适用于包含jquery的更新。另一方面，使用
$（“#模型”）.empty（）；
比
$（“#模型”）.html（“”）更快；
您的JSFIDLE不包含jquery库-包含它可以用于包含jquery的更新。顺便说一句，它会更快