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

Question

我正在尝试创建类似于许多汽车网站(例如 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/

Answer 1

您没有在您的 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 的单线程特性，禁用从未真正发生过。重要的是代码完成时设置的内容。