Auto Populate select boxes from JSON

Question

I currently have the following piece of jQuery which was working until I need to add 3 additional field columns to the JSON. I basically want the html select drop downs to change depending on the data from the previous drop down. Also as you will see my jquery only shows 2 dropdowns is there a way to extend it to a 3rd and 4th to match the JSON data? Many thanks in advance.

Here is my test data:

var makesModels = {
    "Audi":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] }, 
            "A1": {
                "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
            }
        },

    "Audi2":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] }, 
            "A1": {
                "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
            }
        },

    "Audi3":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] },
        "A1": {
            "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
            "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
            "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
        }
    }
}

The jQuery:

function load_search()
{
    // Populate Makes
    jsonData = undefined;

    $.getJSON(makesModels, function (json) {
        jsonData = json;

        for (var make in jsonData) {
            var option = '<option value="' + make + '">' + make + '</option>';
            $("#make").append(option);
        }

        // Populate Models
        $("#make").on("change", function () {
            var selectedOption = $('#make option:selected').val();
            if (selectedOption !== "") {
                $("#model").html('<option value=""> -- select -- </option>');
                var make = $(this).val(),
                    models = jsonData[make];
                for (i = 0; i < models.length; i++) {
                    var option = '<option value="' + models[i] + '">' + models[i] + '</option>';
                    $("#model").append(option);
                }
                $("#model").prop("disabled", false);
            } else {
                $("#model").html('<option value=""> -- select -- </option>').prop("disabled", true);
            }

        });
    });
}

$(function () {
    load_search();
});

The Html:

<fieldset>
    <div class="item">
        <label>Make</label>
        <select id="make">
            <option value="">-- Make --</option>
        </select>
    </div>
    <div class="item">
        <label>Model</label>
        <select id="model">
            <option value="">-- Model --</option>
        </select>
    </div>
    <div class="item">
        <label for="">Model</label>
        <select id="engine">
            <option value="">-- Engine --</option>
        </select>
    </div>
    <div class="item">
        <label for="">Parts</label>
        <select id="parts">
            <option value="">-- Parts --</option>
        </select>
    </div>
</fieldset>

Answer 1

There are a couple of issues in your javascript. First !== is not equals, it is != without the extra equals sign. Also you can't count a javascript object. Your for i; i++ loop won't run because you aren't looping over values in an array, to do this you need to stick to how you wrote the first loop var(x in y).

Here is a working version in JsFiddle . If you can modify the server call to be more uniform, like having all arrays or all objects, that might help.

Javascript:

$(document).ready(function()
    { 


var makesModels = {
    "Audi":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] }, 
            "A1": {
                "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
            }
        },

    "Audi2":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] }, 
            "A1": {
                "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
                "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
            }
        },

    "Audi3":{
        "50": {
            "50 L(1974-1978)": ["Alternators", "Starter Motors"], 
            "50GL(1974-1978)": ["Alternators", "Starter Motors"] },
        "A1": {
            "A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"], 
            "A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"], 
            "A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
        }
    }
}

function populatecascadingdropdown(makesModels)
{
  var jsonData  = makesModels;
    for (var make in jsonData) {
            var option = '<option value="' + make + '">' + make + '</option>';
            $("#make").append(option);
        }

        // Populate Models
        $("#make").on("change", function () {
            var selectedOption = $('#make option:selected').val();
            if (selectedOption != "") {
                $("#model").html('<option value=""> -- select -- </option>');
                var make = $(this).val(),
                    models = jsonData[make];
                for (car in models) {
                    var option = '<option value="' + car + '">' + car + '</option>';
                    $("#model").append(option);
                }
                $("#model").prop("disabled", false);
            } else {
                $("#model").html('<option value=""> -- select  model-- </option>').prop("disabled", true);
            }

        });

                $("#model").on("change", function () {
            var selectedOption = $('#make option:selected').val();
            if (selectedOption != "") {
                $("#engine").html('<option value=""> -- select engine -- </option>');
                var model = $(this).val();
                 var models = jsonData[make];
                 var engines = models[model];
                for (ngin in engines) {
                    var option = '<option value="' + ngin + '">' + ngin + '</option>';
                    $("#engine").append(option);
                }
                $("#model").prop("disabled", false);
            } else {
                $("#model").html('<option value=""> -- select -- </option>').prop("disabled", true);
            }

        });

   $("#engine").on("change", function () {
            var selectedOption = $('#make option:selected').val();
             var selectedModel = $('#model option:selected').val();
            if (selectedOption != "") {
                $("#parts").html('<option value=""> -- select part -- </option>');
                var selectedengine = $(this).val();
                 var models = jsonData[make];
                 var engines = models[selectedModel];
                 var parts =  engines[selectedengine];
                for (var i = 0; i < parts.length; i++) {
                    var option = '<option value="' + parts[i] + '">' + parts[i] + '</option>';
                    $("#parts").append(option);
                }
                $("#parts").prop("disabled", false);
            } else {
                $("#parts").html('<option value=""> -- select -- </option>').prop("disabled", true);
            }

        });
    }
    populatecascadingdropdown(makesModels);
  });