Auto Populate Select Boxes From Json

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 d

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

functionpopulatecascadingdropdown(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);
  });