Question

我有一个很复杂的问题，我似乎无法解决。

我有一个输入文本框字段，用于填充选择列表，当用户输入某个＆＃39; term＆＃39;在文本框中。

例如：
- 如果用户输入“Mercedes”字样。在文本框中，选择列表将填充“A-class＆＃39;”，“B-class＆＃39;”，“C-class＆＃39;”，“ -class＆＃39;
- 如果他们进入奥迪＆＃39;在文本框中，选择列表中填充了＆＃39; A4＆＃39; A5＆＃39;，＆＃39; A6＆＃39;等

到目前为止，这与我打算采用的方式相同。但是，当用户从选择列表中选择模型时，我想在下面创建一个<div>动态填充相应的所选车辆配件。

这是我到目前为止的代码：

HTML

<div>
Manufacturer:<input type="text" id="car_manufacturer"/>
Model: <select id="car_model"></select>
</div>

<p>Vehicle Model Accessories:</p>
<div id="model_accessories">
<!--- Here is a list of the selected vehicle model's accessories. It will change when the model selection changes ------> 
</div>

的Javascript

vehicleModels = {
   "Mercedes": ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
   "Audi": ["A3", "A4", "A5", "A6", "A7", "A8", ],
   "BMW": ["120", "320", "330", "520", "635", "745", ]
}

此函数获取文本框中的值，并检查它是否在上面的对象中定义。如果是，则将相应的车辆模型附加到选择列表。

    $('#car_manufacturer').change(function() {
            if(vehicleModels[$(this).val()]) { 
                $.each(vehicleModels[$(this).val()], function() { 
                    $('#car_model').append('<option>' + this + '</option>');
                 });
            } 
});

以下是问题所在的地方！我现在如何使用相应的所选型号配件填充模型配件<div>？以下是汽车配件目前的存储方式。

mercedes_accessories = ["Xenons", "Adaptive cruise control", "sunroof"];
bmw_accessories = ["Start/stop", "heated seats", "Leather trim"];
audi_accessories = ["Electric seats", "B&O Sound System", "Leather trim",];

非常感谢任何帮助。对不起，如果这个问题有点模糊，很难解释。三江源！

Answer 1

我会做这样的事情：

var vehicleModels = {
       mercedes: ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
       audi: ["A3", "A4", "A5", "A6", "A7", "A8", ],
       bmw: ["120", "320", "330", "520", "635", "745", ]
    },
    vehicleAcc = {
        a3 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a4 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a6 : ["Xenons", "Adaptive cruise control", "sunroof"]
    };


$('#car_manufacturer').on('change', function() {
    if(this.value.toLowerCase() in vehicleModels) { 
        $.each(vehicleModels[this.value.toLowerCase()], function(i,e) { 
            $('#car_model').append('<option>'+e+'</option>');
        });
    }
});

$('#car_model').on('change', function() {
    if (this.value.toLowerCase() in vehicleAcc) {
        $.each(vehicleAcc[this.value.toLowerCase()], function(i,e) {
            $('#car_model_acc').append('<option>'+e+'</option>');
        });
    }
});

FIDDLE

Answer 2

试试这个：

var accessories;

accessories.mercedes = ["Xenons", "Adaptive cruise control", "sunroof"];
accessories.bmw = ["Start/stop", "heated seats", "Leather trim"];
accessories.audi = ["Electric seats", "B&O Sound System", "Leather trim"];

$("#car_model").change( function( ) {

    // cache accessories for this manufacturer
    var arr = accessories[ $("#car_manufacturer").val().toLowerCase() ];

    for( var i = 0; i < arr.length; i += 1 ) {
       $("#accessories").append("<option>" + arr[i] + "</option>");
    }
});

根据先前选择列表中的选择填充多个选择框

2 个答案: