Question

我对JavaScript很陌生我有一些基本的了解，但我的技能有限。

我需要创建一个4层下拉列表，每个层都依赖于前一个条目。

它将是Car Make＆gt;＆gt;＆gt;汽车模型＆gt;＆gt;＆gt;＆gt;引擎尺寸＆gt;＆gt;＆gt;变式

当所有数据一起加载时，我发现了一个jquery教程，但最终这些字段总共会有超过1000种不同的汽车变体，所以这会影响每个页面的加载时间。

虽然在网上搜索解决方案，但我读到了AJAX，这听起来像是我问题的理想解决方案，但我发现的AJAX和下拉列表的大多数教程都与ASP.NET数据库有关。我不需要将它链接到数据库我只需要依赖选择框功能

我想要的一个例子是Superchips Website左侧工具标题为“我的车辆如何改进？”我希望重现类似的东西。

非常感谢人们可能提供的任何帮助或教程！

Answer 1

如果您无权访问数据库服务器，也可以使用JSON文件。 http://www.secretgeek.net/json_3mins.asp

我建议你使用jQuery来满足这个要求。如果使用JSON文件，则可以使用$.ajax函数或$.getJSON函数。

以下是我几周前编写的一个例子：

var strHtmlOutput = "";

$.getJSON('cities.json', function(data) {

        // Loop over all records in the json file
        $.each(data.cities, function() {        
            var strName = $(this).attr("name");
            var strCityId = $(this).attr("id");
            var strProvinceId = $(this).attr("provinceid");

                                strHtmlOutput += "<option value='" + strCityId + "'>";
            strHtmlOutput += strName;
            strHtmlOutput += "</option>";

        });     
    });

// Appending new records in the City dropdown list
$("#strCityId").append((strHtmlOutput);

JSON文件内容：

{
    "cities": [
    {
        "id": "1",
        "provinceid": "1",
        "name": "Montreal"
    },

    {
        "id": "2",
        "provinceid": "1",
        "name": "Quebec"
    },

    {
        "id": "3",
        "provinceid": "2",
        "name": "Ottawa"
    },

    {
        "id": "4",
        "provinceid": "2",
        "name": "Mississauga"
    },

    {
        "id": "5",
        "provinceid": "3",
        "name": "Vancouver"
    },

    {
        "id": "6",
        "provinceid": "3",
        "name": "Victoria"
    }

    ]
}

希望这有帮助！

如何创建Ajax级联/链接/从属下拉列表或选择框？

1 个答案: