getElementById无法获取指定ID的<div>元素，页面加载提示elem为null

核心问题1：<select>标签内嵌套<div>违反HTML规范 #

HTML规定<select>的合法子元素仅为<option>和<optgroup>，浏览器会自动将<div id='jTitles'>、<div id='tCodes'>移出<select>标签，导致getElementById无法在预期位置找到元素，返回null。

修正方案：
移除<select>内的<div>，给两个<select>分别设置ID，直接操作<select>元素更新选项：

<select id="jobTitleSelect" name="jt[]" MULTIPLE size=5 class="text9ptBlack">
    <option value="">Select Job Title</option>
</select>
<select id="jobCodeSelect" name="jt[]" MULTIPLE size=5 class="text9ptBlack">
    <option value="">Select Title Code</option>
</select>

核心问题2：页面加载事件使用错误 #

document.addEventListener("load")不是正确的DOM加载完成事件，且直接调用changeTUnit('all')会导致函数在DOM未完全渲染时执行，此时目标元素还未生成。

修正方案：
使用DOMContentLoaded事件，传递函数引用（避免立即执行）：

document.addEventListener("DOMContentLoaded", function() {
    changeTUnit('all');
});

其他代码错误修正 #

• 拼写错误：innerHtml改为标准写法innerHTML
• 未定义变量：在changeTUnit函数开头添加var codeIH = "";
• 数组方法错误：普通数组没有values()方法，直接使用数组本身即可（如unit1titles.values()改为unit1titles）
• Map遍历处理：jobTitles.keys()返回的是迭代器，需转为数组后遍历，用Array.from(jobTitles.keys())

完整修正后的代码 #

<?php
/*
To test javascript to change the contents of a select element 
*/
$titleUnit = 'all';
?>
<html>
<head>
</head>
<body>
<script>
const jobTitles = new Map();
const unit1titles = [];
const unit2titles = [];
jobTitles.set("P1", "Programmer");
unit1titles.push("P1");
jobTitles.set("A1", "Analyst");
unit1titles.push("A1");
jobTitles.set("C3", "Custodian");
unit2titles.push("C3");
jobTitles.set("L4", "Landscaper");
unit2titles.push("L4");
</script>

<table border=1 cellspacing=0 cellpadding=5>
    <tr>
        <td>
            <table border=0>
                <tr>
                    <td valign='center' class="formLabel">Job Title</td>
                    <td class="formLabel"> &nbsp;&nbsp;<i>In Unit:</td>
                    <td valign='center' class="formLabel">
                        <input type='radio' name='titleUnit' value="U1" onclick="changeTUnit('U1')"><?php echo ($titleUnit=='U1' ? ' CHECKED' : ''); ?> Unit 1
                        <input type='radio' name='titleUnit' value="U2" onclick="changeTUnit('U2')"><?php echo ($titleUnit=='U2' ? ' CHECKED' : ''); ?> Unit 2
                        <input type='radio' name='titleUnit' value="all" onclick="changeTUnit('all')"><?php echo ($titleUnit=='all' ? ' CHECKED' : ''); ?> All
                    </td>
                </tr>
            </table>
        </td>
        <td class="formLabel">
            Job Code
        </td>
    </tr>
    <tr>
        <td class="formField">
            <select id="jobTitleSelect" name="jt[]" MULTIPLE size=5 class="text9ptBlack">
                <option value="">Select Job Title</option>
            </select>
        </td>
        <td class="formField">
            <select id="jobCodeSelect" name="jt[]" MULTIPLE size=5 class="text9ptBlack">
                <option value="">Select Title Code</option>
            </select>
        </td>
    </tr>
</table>
<script>
function changeTUnit(newUnit) {
    var titleIH = "";
    var codeIH = "";
    var tCodes = [];
    switch (newUnit) {
        case 'all': tCodes = Array.from(jobTitles.keys()); break;
        case "U1": tCodes = unit1titles; break;
        case "U2": tCodes = unit2titles; break;
    }
    for (let tC of tCodes) {
        titleIH += "<option value='" + tC + "'>" + jobTitles.get(tC) + "</option>\n";
        codeIH += "<option value='" + tC + "'>" + tC + "</option>\n";
    }       
    var titleElem = document.getElementById('jobTitleSelect'); 
    titleElem.innerHTML = "<option value=''>Select Job Title</option>" + titleIH;
    
    var codeElem = document.getElementById('jobCodeSelect');
    codeElem.innerHTML = "<option value=''>Select Title Code</option>" + codeIH;
}

document.addEventListener("DOMContentLoaded", function() {
    changeTUnit('all');
});
</script>
</body>
</html>

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