javascript使用选择框填充其他选择框 [英] javascript using select box to fill other select box

问题描述

我正在尝试创建品牌"，型号"和年份"选择下拉列表，类似于许多汽车站点(例如Autotrader).但是，在用户首先选择初始下拉列表之后，很难在第二个下拉列表中进行填充.希望有建议.

I am trying to create a Make, Model, and Year select drop down similar to many car sites such as Autotrader. However I am having difficulty getting the second select drop down to populate after the user first selects the initial drop down. Hoping for suggestions.

我的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:

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

Here is my jsfiddle: http://jsfiddle.net/rynslmns/W9TLT/

推荐答案

您没有在小提琴中包含jquery.

You didn't include jquery in your fiddle.

也就是说，您实际上不应该使用全局变量，而应该创建自己的对象并稍加修改代码:

That said, you shouldn't really use a global, instead make your own object and modify your code slightly:

$(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的单线程性质，禁用从未真正发生过.重要的是代码完成后将其设置为什么.

Another note. Disabling the dropdown at the start of your code and then enabling it at the end has no effect other than to enable the dropdown. Due to the single-threaded nature of browsers/javascript, the disable never really happens. All that matters is what it is set to when the code completes.

这篇关于javascript使用选择框填充其他选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！