Remplir une zone de sélection multiple en fonction de la sélection d'une liste de sélection précédente

Question

J'ai un problème assez complexe que je n'arrive pas à résoudre.

J'ai un champ de zone de texte de saisie qui remplit une liste de sélection, lorsque l'utilisateur entre un certain 'terme' dans la zone de texte.

Par exemple:
- Si un utilisateur entre le mot 'Mercedes' dans la zone de texte, la liste de sélection sera rempli avec 'A-classe', 'classe B', « C-classe ',' S-class '
- S'ils entrent' Audi 'dans la zone de texte, la liste de sélection est remplie avec' A4 ',' A5 ',' A6 ', etc.

Ceci jusqu'à présent se comporte de la manière dans lequel je l'ai voulu. Cependant, je voudrais créer un <div> ci-dessous qui est rempli dynamiquement avec les accessoires du véhicule sélectionné correspondant, lorsqu'un utilisateur sélectionne un modèle de la liste de sélection.

Voici le code que j'ai jusqu'à présent:

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", ] 
} 

Cette fonction prend la valeur dans la zone de texte et vérifie si est défini dans l'objet ci-dessus. Si c'est le cas, les modèles de véhicules correspondants sont ajoutés à la liste de sélection.

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

est ici où le problème commence! Comment puis-je remplir maintenant les accessoires du modèle <div> avec les accessoires du modèle sélectionné correspondant? Voici comment les accessoires de voiture sont stockés pour le moment.

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",]; 

Toute aide serait grandement appréciée. Je suis désolé si la question est un peu vague, c'est assez difficile à expliquer. Je vous remercie!

Answer 1

je ferais quelque chose comme ceci:

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

Essayez ceci:

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