javascript - 从 JSON 自动填充选择框

Question

我目前有以下 jQuery 片段一直在工作，直到我需要向 JSON 添加 3 个额外的字段列。我基本上希望 html 选择下拉菜单根据前一个下拉菜单中的数据进行更改。另外，正如您将看到的，我的 jquery 只显示 2 个下拉列表，有没有办法将其扩展到第 3 个和第 4 个以匹配 JSON 数据？提前谢谢了。

这是我的测试数据:

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

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

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

您的 JavaScript 中存在一些问题。首先 !== 不等于，它是 != 没有额外的等号。你也不能算一个javascript对象。你的我； i++ 循环不会运行，因为您没有循环数组中的值，为此您需要坚持编写第一个循环 var(x in y) 的方式。

这是 JsFiddle 中的工作版本.如果您可以修改服务器调用以使其更加统一，例如拥有所有数组或所有对象，那可能会有所帮助。

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