根据下拉选择填充json数组中的值？

Lets come to the point here is what I need to achive,

Auto Parts site

I need achieve the SELECT YOUR VEHICAL functionality using json and jquery,

I have achieved displaying the json data in dropdown list (hardcoded).

Based On Year selection the cars should be displayed for Example if we select 1901 it shows only FORD car option.

Please help on this to achieve using json.

This is what I have done. https://jsfiddle.net/91r9ur4e/

var a = {
            Cars: [{
                "CarType": "BMW",
                "carID": "bmw123"
            }, {
                "CarType": "mercedes",
                "carID": "merc123"
            }, {
                "CarType": "volvo",
                "carID": "vol123r"
            }, {
                "CarType": "ford",
                "carID": "ford123"
            }]
        };
        $.each(a.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });

Selected carId should be parameter for next dropdown

This totally depends on your json data structure. Here is a random assumption of a json data model and a method that populates the second dropdown using code that is similar to yours, https://jsfiddle.net/571poa7c/.

Pick the "ford" parent option to see the cascade working.

$('#dropDownDest').change(function () {
            $.each(a[$(this).val()], function(key, value) {
                $('#model').append($('<option></option>').val(value.id).html(value.year + ' - ' + value.model));
            });
        });

Cascade was performed by mererly performing another loop through the json objects using the key from the first dropdown selection.

If you want more specific help, we need to see the full json data structure that you plan to use so that we can see how the data is linked between dropdowns.

Try this loop instead of your $.each

a.Cars.forEach((car) => {
  $("#dropDownDest").append($('<option></option>').val(car.carID).html(car.CarType));
});

Hmm.. If you're open devtools you can see, that after each selection it's sends request to the server, on response it's fills next dropdown with available values, if value just one it's set's as selected in next dropdown. Additionally with requests for additional data it's sends requests for an image and on server's answer it's fills according field

so, code for first part will look like something following

 $('#dropDownSource').change(function () {
            $.get(....).success(function(options) {
                if (options.size() == 1) {
                     // possibly here need add this option to this dropdown and change 'disabled' to enabled
                     $('#dropDownDest').val(...your option...)
                } else {
                     $('#dropDownDest').append options...
                }
            })
        });

if some one is looking for a pure js approach

let Cars = [{
    "CarType": "BMW",
    "Year" : 1991,
    "carID": "bmw123"
}, {
    "CarType": "mercedes",
    "Year" : 1992,
    "carID": "merc123"
}, {
    "CarType": "volvo",
    "Year" : 1993,
    "carID": "vol123r"
}, {
    "CarType": "ford",
    "Year" : 1994,
    "carID": "ford123"
}]

let years = Cars.map((record) => {
  let option = document.createElement('option');
  let year = document.createTextNode(record["Year"]);  
  option.appendChild(year);
  document.getElementById('carYears').appendChild(option)
});

document.getElementById('carYears').onchange = function(e) {
   let chosenYear = document.getElementById('carYears').value;
   
   let filteredCarType = Cars.filter((records) => {
      if(records["Year"] == chosenYear) return records["CarType"];
   });   
   updateMake(filteredCarType);
}

function updateMake(carDetailsArray) {
  let makeDropDown = document.getElementById('carMake');
    while (makeDropDown.hasChildNodes()) {
        makeDropDown.removeChild(makeDropDown.lastChild);
    }
    for(i=0;i<carDetailsArray.length;i++) {
      let option = document.createElement('option');      
      let make = document.createTextNode(carDetailsArray[i]["CarType"]);  
      option.appendChild(make);      
      document.getElementById('carMake').appendChild(option);       
      document.getElementById('carMake').removeAttribute('disabled')
    }
}

<select id="carYears">
<option>Please Select Car Year</option>
</select>
<select disabled id="carMake">
Year
</select>

</div>