关联下拉菜单问题：选择澳大利亚后无法加载对应服务选项

你的代码存在语法、逻辑和DOM加载顺序问题，以下是具体修正方案：

错误点排查与修正 #

• 重复变量声明+无效JSON解析：原代码var jsondata = var jsondata = ...是语法错误，且jsondata本身就是JS数组对象，不需要JSON.parse()解析。
• 数组访问逻辑错误：jsondata是数组结构，不能直接用decodedJson[country]获取对应国家数据，需遍历数组匹配country字段。
• 缺少目标选项：原国家下拉菜单没有澳大利亚选项，无法触发对应逻辑，必须添加<option value="australia">Australia</option>。
• DOM加载顺序问题：script放在HTML结构前会导致执行时DOM未渲染，jQuery无法绑定事件，需将script移到</body>前或用$(document).ready()包裹代码。

修正后的完整代码 #

<html>
    <body>
        <select id="country">
            <option value="0">usa-voip</option>
            <option value="australia">Australia</option>
        </select>
        <select id="service">
            <option value="0">nextdoor</option>
        </select>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            var jsondata = [{"country": "australia", "service": ["nextdoor", "clubhouse", "farpost", "mylavash", "burger-king", "zolushka", "zdorov"]}]
            
            $(document).ready(function() {
                $("#country").change(function() {
                    var selectedCountry = $(this).val();
                    // 遍历数组找到匹配的国家对象
                    var targetCountry = jsondata.find(item => item.country === selectedCountry);
                    
                    var serviceSelect = document.getElementById('service');
                    serviceSelect.innerHTML = "";

                    if (targetCountry) {
                        // 生成服务选项
                        targetCountry.service.forEach(service => {
                            var opt = document.createElement('option');
                            opt.value = service;
                            opt.textContent = service;
                            serviceSelect.appendChild(opt);
                        });
                    } else {
                        // 无匹配时添加默认选项
                        var defaultOpt = document.createElement('option');
                        defaultOpt.value = "0";
                        defaultOpt.textContent = "请选择国家";
                        serviceSelect.appendChild(defaultOpt);
                    }
                });
            });
        </script>
    </body>
</html>

关键修改说明 #

• 移除重复变量声明和无效的JSON.parse()
• 使用数组find()方法精准定位对应国家的服务数据
• 添加澳大利亚的下拉选项
• 用$(document).ready()确保DOM加载完成后再绑定事件
• 增加无匹配时的默认选项处理，提升用户体验

内容的提问来源于stack exchange，提问作者big boss