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

Question

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

Answer 1

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.