Question

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

你没有在你的小提琴中加入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的单线程特性，禁用永远不会发生。重要的是代码完成时设置的内容。

Answer 2

你的小提琴没有加载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
});

Working

Answer 3

包含jquery。你的例子有效。

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

3 个答案: