如何创建 Ajax 级联/链式/从属下拉列表或选择 Box

How to create an Ajax Cascading/Chained/Dependant Dropdown list or Select Box?

本文关键字：链式 Box 选择 下拉列表 级联 何创建 创建 Ajax      更新时间：2023-09-26

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

我需要创建一个 4 层下拉列表，其中每层都取决于前一个条目。

它将是一个汽车制造>>>汽车模型>>>>发动机尺寸>>>变体

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

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

我想要的一个例子是Superchips网站，该工具位于左侧的标题为"我的车辆将如何改进？我希望重新创建类似的东西。

人们可能拥有的任何帮助或教程将不胜感激！

如果您无权访问数据库服务器，也可以使用 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"
    }
    ]
}

希望这有帮助！

相关文章：