Question

我正在尝试建立一个类似于所有在线汽车经纪人（即autotrader等）的表格。我的意思是，我希望选择'Make'，'Model'和'Year'。我希望模型和年份被禁用，直到用户选择他们的车辆的'make'，从而从'make'获取值并将'model'选择框更改为仅用于该make的模型。然后是“年”等同样的事情。

            <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文件中无法正常运行。

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

Answer 1

你可以做以下两件事之一：

您可以在javascript中设置一些预先填充了值
您可以向服务器写一些ajax调用，这些调用将根据您的数据库保存来检索值。

这是一个实现第一个方法的例子，这可能是你开始的好地方。

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选择，本地化变量等）。但是它可以满足您的需求，您可以稍微使用它。

注意：这是Krishna小提琴的延伸，所以对他的第一部分设置表示赞赏。不过，我想我已经添加了你真正想要的部分。

通过从下拉列表中选择，启用另一个下拉列表

1 个答案: