WordPress中PHP与JS联动下拉选项不显示且无功能问题排查

一、PHP代码错误及修复 #

1. 选项拼接逻辑错误
   原函数循环时使用$options =会覆盖初始选项和之前循环生成的内容，最终仅保留最后一个行业选项；同时value属性的字符串拼接语法错误，导致选项值为空。
   修复后的函数（同时添加WordPress安全转义）：

function generate_job_sector_options($job_sectors){
    $options = '<option value="">Select a Job Sector</option>';

    foreach($job_sectors as $sector) {
        // 使用 .= 追加选项，正确拼接value属性并做安全转义
        $options .= '<option value="' . esc_attr($sector["name"]) . '">' . esc_html($sector['name']) . '</option>';
    }

    return $options;
}

2. 未输出函数返回值
   模板中调用函数时未使用echo，导致生成的HTML选项无法渲染到页面上。
   修复后的select标签代码：

<select id="job-sector" name="job-sector"><?php echo generate_job_sector_options($job_sectors); ?></select>

二、JavaScript代码错误及修复 #

1. 变量声明语法错误
   var.selectedSector是无效的变量声明方式，应改为var selectedSector。
2. 未添加技能文本内容
   创建<p>元素后未将技能名称写入元素，导致技能容器为空。
3. 增加存在性判断
   添加对jobSkills[selectedSector]的判断，避免选择不存在的行业时出现报错。

修复后的JavaScript代码：

var jobSkills = {
    'IT': ['Programming', 'Networking', 'Database Management'],
    'Marketing': ['Digital Marketing', 'Market Research', 'Advertising']
};

document.getElementById('job-sector').addEventListener('change', function(){
    var selectedSector = this.value;
    var skillsContainer = document.getElementById('skills-container');

    skillsContainer.innerHTML='';

    if(selectedSector && jobSkills[selectedSector]) {
        var skills = jobSkills[selectedSector];

        skills.forEach(function(skill){
            var skillElement = document.createElement('p');
            skillElement.textContent = skill;
            skillsContainer.appendChild(skillElement);
        })
    }
})

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