如何将JSON数据绑定到HTML两级联动下拉框并展示对应人口数据

以下是可直接运行的完整代码，满足你要求的两级联动下拉+人口展示效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>地区人口查询</title>
</head>
<body>
    <p>
        <input type="button" style="margin:10px 0;" onclick="populateCountries()" value="加载数据" />
    </p>
    <!-- 国家下拉框 -->
    <select id="countrySelect" onchange="populateStates(this.value)">
        <option value="">-- 选择国家 --</option>
    </select>
    <!-- 州/省下拉框 -->
    <select id="stateSelect" onchange="showPopulation(this.value)" style="margin-left: 10px;">
        <option value="">-- 先选择国家 --</option>
    </select>
    <!-- 人口展示区域 -->
    <p id="populationDisplay" style="margin-top: 20px; font-size: 18px;"></p>

    <script>
        // 原始JSON数据
        const regionData = [
            {"country": "USA", "state": "Texas", "population": "20M"},
            {"country": "USA", "state": "Alabama", "population": "4M"},
            {"country": "USA", "state": "California", "population": "33M"},
            {"country": "India", "state": "Maharashtra", "population": "112M"},
            {"country": "Japan", "state": "Tokyo", "population": "13M"},
            {"country": "India", "state": "Bihar", "population": "104M"},
            {"country": "USA", "state": "Florida", "population": "15M"},
            {"country": "India", "state": "Gujarat", "population": "60M"},
            {"country": "USA", "state": "Georgia", "population": "8M"},
            {"country": "Japan", "state": "Osaka", "population": "8M"},
            {"country": "Japan", "state": "Saitama", "population": "7M"},
            {"country": "India", "state": "Tamil Nadu", "population": "72M"}
        ];

        // 填充国家下拉框（自动去重）
        function populateCountries() {
            const countrySelect = document.getElementById('countrySelect');
            // 先清空原有选项，避免重复加载
            countrySelect.innerHTML = '<option value="">-- 选择国家 --</option>';
            // 提取所有不重复的国家名
            const countries = [...new Set(regionData.map(item => item.country))];
            countries.forEach(country => {
                const option = document.createElement('option');
                option.value = country;
                option.textContent = country;
                countrySelect.appendChild(option);
            });
            // 加载完国家后重置州下拉和人口显示
            document.getElementById('stateSelect').innerHTML = '<option value="">-- 先选择国家 --</option>';
            document.getElementById('populationDisplay').textContent = '';
        }

        // 根据选中的国家填充州/省下拉框
        function populateStates(selectedCountry) {
            const stateSelect = document.getElementById('stateSelect');
            stateSelect.innerHTML = '<option value="">-- 选择州/省 --</option>';
            document.getElementById('populationDisplay').textContent = '';
            if (!selectedCountry) return;
            // 过滤出对应国家的所有州
            const states = regionData.filter(item => item.country === selectedCountry);
            states.forEach(item => {
                const option = document.createElement('option');
                option.value = item.state;
                option.textContent = item.state;
                stateSelect.appendChild(option);
            });
        }

        // 根据选中的州显示对应人口
        function showPopulation(selectedState) {
            const displayEle = document.getElementById('populationDisplay');
            if (!selectedState) {
                displayEle.textContent = '';
                return;
            }
            // 找到匹配的地区数据
            const targetRegion = regionData.find(item => item.state === selectedState);
            if (targetRegion) {
                displayEle.textContent = `${targetRegion.country} ${targetRegion.state} 的人口为：${targetRegion.population}`;
            }
        }
    </script>
</body>
</html>

• 加载国家下拉时用Set自动去重，避免同一个国家重复出现
• 两级下拉联动：国家切换时自动清空原有州选项和人口展示，重新加载对应州列表
• 选中州后直接匹配原始数据展示人口，后续如果要修改数据只需要更新regionData数组即可

内容的提问来源于stack exchange，提问作者Harshatej M