通过从下拉列表中选择，启用另一个下拉列表 [英] By selecting from dropdown, enable another dropdown

问题描述

我正在尝试构建类似于所有在线汽车经纪人(即自动交易等)的表格.我的意思是，我想选择制作"，模型"和年份".我希望在用户选择其车辆的品牌"之前禁用型号"和年份"，从而从品牌"中获取值并将型号"选择框更改为仅该品牌的型号.然后对于年"相同，依此类推.

I am trying to build a form similar to all the online car brokers (i.e. autotrader, etc). By that I mean, I want to have selects for 'Make', 'Model', and 'Year'. I would like Model and Year to be disabled until a user selects the 'make' of their vehicle, thus getting the value from 'make' and changing the 'model' select box to only models for that make. And then the same for 'years' and so on.

            <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文件中正确运行.

This is my javascript. In the head of my html. However, the javascript does not run correctly in my html file.

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

我已经开始了基本的jsfiddle. http://jsfiddle.net/rynslmns/N9XTZ/1/

I have started a basic jsfiddle. http://jsfiddle.net/rynslmns/N9XTZ/1/

推荐答案

您可以执行以下两项操作之一:

You can do one of two things:

1. 您可以在javascript中设置一些预先填充了值的数组
2. 您可以向服务器编写一些ajax调用，这些调用将根据数据库的内容来检索值.

下面是实现第一种方法的示例，这可能是您入门的好地方.

Here's an example that implements the first method, which is probably a good place for you to start.

http://jsfiddle.net/N9XTZ/6/

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

我没有美化它，也没有使用所有最佳实践(缓存DOM选择，本地化变量等).但是它可以满足您的需求，您可以尝试一下.

I didn't prettify it, nor am I using all best practices (caching DOM selections, localizing variables, etc). But it does what you're looking for, and you can play around with it a bit.

注意:这是克里希纳小提琴的延伸，因此值得称赞的是他准备了第一部分.但是，我认为我已经添加了您真正想要的部分.

Note: this is an extension of Krishna's fiddle, so credit to him for getting the first part set up. I think, however, that I've added the part you were really looking for.

这篇关于通过从下拉列表中选择，启用另一个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！