Automatisches Auffüllen eines Dropdown-Menüs basierend auf den Ergebnissen der beiden vorherigen Dropdown-Listen

Question

Wenn drei Dropdown-Menüs vorhanden sind, verwendet das dritte Dropdown-Menü das zweite und das erste Dropdown-Menü. Die ersten beiden werden ausgefüllt, zum Beispiel ist das Feld für das erste Dropdown-Menü Automobilhersteller, das zweite Feld ist die Art des Automobils (Auto, Lieferwagen, LKW) und das dritte ist eine Liste von Modellen basierend auf den ersten zwei Dropdowns Selektionen. Sagen wir, ich habe Honda als Marke und Truck als Automobil gewählt. Die einzige Option für den dritten Drop-Down wäre die Honda Ridgeline? Meine Frage ist, wie würde ich automatisch ein Feld in einem Dropdown-Menü auffüllen, wenn die endgültige Dropdown-Liste nur eine Option als Ergebnis der ausgewählten Optionen der vorherigen Dropdown-Menüs hat. Ich versuche Javascript zu verwenden, da ich int Client-Seite die einzige Option habe. Das ist nicht HW, nur um herauszufinden, wie man etwas in dieser Richtung macht. Jede Hilfe würde sehr geschätzt werden. Ein JS Fiddle Link wäre auch sehr geschätzt, ich hatte nicht viel Glück, ein solches Beispiel zu finden.

Answer 1

var data = { 
 
    Honda: { 
 
    car: ["Civic", "Acura"], 
 
    truck: ["Ridgeline"] 
 
    }, 
 
    Toyota: { 
 
    car: ["Camry", "Corolla"], 
 
    truck: ["Some truck"] 
 
    } 
 
} 
 

 
var updateDropDown = function(){ 
 
    var make = $("#make").val() 
 
    var type = $("#type").val() 
 
    var options = data[make][type] 
 
    var html = "" 
 
    options.forEach(function(option){ 
 
    html += '<option value="' + option + '">' + option + '</option>' 
 
    }) 
 
    $("#options").html(html) 
 
} 
 

 
$("#make").change(updateDropDown) 
 
$("#type").change(updateDropDown) 
 
updateDropDown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<select id="make"> 
 
    <option value="Honda">Honda</option> 
 
    <option value="Toyota">Toyota</option> 
 
</select> 
 
<select id="type"> 
 
    <option value="car">Car</option> 
 
    <option value="truck">Truck</option> 
 
</select> 
 
<select id="options"> 
 
</select>