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

自动填充JSON中的选择框

1 个答案: