基于HTML中的两个下拉选择动态显示JSON数据的Javascript

基于HTML中的两个下拉选择动态显示JSON数据的JavaScript可以通过以下步骤来实现：

创建HTML页面，包括两个下拉选择框和一个用于显示JSON数据的容器。

<!DOCTYPE html>
<html>
<head>
    <title>动态显示JSON数据</title>
</head>
<body>
    <label for="category">选择分类：</label>
    <select id="category" onchange="loadData()">
        <option value="">请选择</option>
        <option value="1">分类1</option>
        <option value="2">分类2</option>
    </select>

    <br>

    <label for="item">选择项目：</label>
    <select id="item" onchange="displayData()"></select>

    <br>

    <div id="dataContainer"></div>

    <script src="script.js"></script>
</body>
</html>

创建JavaScript文件script.js，用于处理下拉选择框的改变事件和动态显示JSON数据。

function loadData() {
    var category = document.getElementById("category").value;

    // 发送请求获取对应分类的JSON数据
    // 可以使用XMLHttpRequest或者fetch等方式发送异步请求

    // 假设从服务器获取的JSON数据如下：
    var data = {
        "1": [
            {
                "id": "1",
                "name": "项目1"
            },
            {
                "id": "2",
                "name": "项目2"
            }
        ],
        "2": [
            {
                "id": "3",
                "name": "项目3"
            },
            {
                "id": "4",
                "name": "项目4"
            }
        ]
    };

    var itemSelect = document.getElementById("item");
    itemSelect.innerHTML = ""; // 清空原有选项

    if (category) {
        var items = data[category];
        for (var i = 0; i < items.length; i++) {
            var option = document.createElement("option");
            option.value = items[i].id;
            option.text = items[i].name;
            itemSelect.appendChild(option);
        }
    }
}

function displayData() {
    var category = document.getElementById("category").value;
    var itemId = document.getElementById("item").value;

    // 根据选择的分类和项目，从服务器获取对应的JSON数据
    // 可以使用XMLHttpRequest或者fetch等方式发送异步请求

    // 假设从服务器获取的JSON数据如下：
    var data = {
        "1": [
            {
                "id": "1",
                "name": "项目1",
                "description": "项目1的描述"
            },
            {
                "id": "2",
                "name": "项目2",
                "description": "项目2的描述"
            }
        ],
        "2": [
            {
                "id": "3",
                "name": "项目3",
                "description": "项目3的描述"
            },
            {
                "id": "4",
                "name": "项目4",
                "description": "项目4的描述"
            }
        ]
    };

    var dataContainer = document.getElementById("dataContainer");
    dataContainer.innerHTML = ""; // 清空原有数据

    if (category && itemId) {
        var items = data[category];
        for (var i = 0; i < items.length; i++) {
            if (items[i].id === itemId) {
                var jsonData = JSON.stringify(items[i], null, 2);
                dataContainer.innerText = jsonData;
                break;
            }
        }
    }
}

window.onload = function() {
    loadData();
};