如何使用jQuery实现表格行中下拉框值的隐藏参数正确传递？

问题根源 #

1. 重复ID冲突：所有行的下拉框、隐藏输入框都使用了相同ID（如specialization、hidden_spec），而DOM中ID必须唯一。document.getElementById只会返回第一个匹配元素，导致后续行的下拉框无法正确修改对应行的隐藏输入框值。
2. 动态ID格式错误：尝试用纯数字的courseId作为ID时，违反HTML ID规范（ID不能以数字开头），导致JS无法找到元素，抛出Cannot set properties of null错误。

修复方案1：利用DOM上下文关联元素（推荐） #

无需设置唯一ID，通过元素所在的表格行（tr）来关联同组元素，避免ID冲突问题。

修改后的HTML代码

<form action="helper/addTOPlan.php" method="POST">
    <tr id="<?php echo $course->id; ?>">
        <td class="p-4">
            <div class="media align-items-center">
                <img src="<?php echo get_template_directory_uri() . $course->image ?>" class="d-block ui-w-40 ui-bordered mr-4" alt="">
                <div class="media-body">
                    <a href="#" class="d-block text-dark"><?php echo $course->name; ?></a>
                    <small>
                        <span class="text-muted"><?php echo  $course->credit_points; ?> CP</span> &nbsp;
                        <span class="text-muted"> <?php echo  $dbUtil->getSemester($course->semester_id)[0]->name; ?></span>&nbsp;
                        <span class="text-muted"><a href="<?php echo  $course->modhb_link; ?>" class="card-link">Go to Module Handbook</a></span>
                    </small>
                </div>
            </div>
        </td>
        <td class="text-right font-weight-semibold align-middle p-4">
            <div class="dropdown">
                <!-- 移除重复ID，通过this传递当前下拉框元素 -->
                <select name="specialization" class="specialization-select" onchange="setSpecValue(this)">
                    <option value="0">Select</option>
                    <option value="spec1">Specialization 1</option>
                    <option value="spec2">Specialization 2</option>
                    <option value="supp">Supplementary Section</option>
                </select>
            </div>
        </td>
        <td class="align-middle p-4">
            <input type="text" class="form-control text-center semester" name="semester" value="23">
            <input class="course-name" type="hidden" name="hidden_course_name" value="<?php echo $course->name; ?>" />
            <input class="course-cp" type="hidden" name="hidden_course_CP" value="<?php echo $course->credit_points; ?>" />
            <input class="course-offerin" type="hidden" name="hidden_course_offerredIn" value="<?php echo $dbUtil->getSemester($course->semester_id)[0]->name; ?>" />
            <!-- 保留类名，移除重复ID -->
            <input class="specialization-hidden" type="hidden" name="hidden_specialization" value="" />
        </td>
        <td class="align-middle p-4">
            <button type="submit" onclick="addToPlan(this)" id="<?php echo $course->id; ?>">
                Add
            </button>
        </td>
    </tr>
</form>

新增辅助JS函数

function setSpecValue(selectElement) {
    // 从当前下拉框找到所在的表格行，再定位该行的隐藏输入框
    const tr = selectElement.closest('tr');
    const hiddenSpec = tr.querySelector('.specialization-hidden');
    hiddenSpec.value = selectElement.value;
}

修改原addToPlan函数

function addToPlan(button) {
    // 从点击的按钮定位到所在表格行
    const tr = button.closest('tr');
    const $semester = tr.querySelector('.semester').value;
    const $courseName = tr.querySelector('.course-name').value;
    const $courseCP = tr.querySelector('.course-cp').value;
    const $courseOfferIn = tr.querySelector('.course-offerin').value;
    const $specialization = tr.querySelector('.specialization-hidden').value;

    console.log("semester : " + JSON.stringify($semester));
    console.log("courseName : " + JSON.stringify($courseName));
    console.log("courseCP : " + JSON.stringify($courseCP));
    console.log("courseOfferIn : " + JSON.stringify($courseOfferIn));
    console.log("specialization: " + JSON.stringify($specialization));
}

修复方案2：生成合规的唯一ID #

如果必须使用动态ID，需给ID添加前缀（避免纯数字开头），确保每个元素ID唯一。

修改后的HTML代码

<form action="helper/addTOPlan.php" method="POST">
    <tr id="course-<?php echo $course->id; ?>">
        <!-- 其他内容不变 -->
        <td class="text-right font-weight-semibold align-middle p-4">
            <div class="dropdown">
                <!-- 生成唯一ID：前缀+courseId -->
                <select name="specialization" id="spec-select-<?php echo $course->id; ?>" onchange="document.getElementById('spec-hidden-<?php echo $course->id; ?>').value=this.value">
                    <option value="0">Select</option>
                    <option value="spec1">Specialization 1</option>
                    <option value="spec2">Specialization 2</option>
                    <option value="supp">Supplementary Section</option>
                </select>
            </div>
        </td>
        <td class="align-middle p-4">
            <!-- 对应生成唯一ID的隐藏输入框 -->
            <input class="specialization" type="hidden" name="hidden_specialization" id="spec-hidden-<?php echo $course->id; ?>" value="" />
            <!-- 其他输入框建议同步修改为唯一ID或保留类名 -->
        </td>
        <!-- 按钮部分不变 -->
    </tr>
</form>

修改addToPlan函数

function addToPlan(id) {
    const tr = document.getElementById(id);
    const $semester = tr.querySelector('.semester').value;
    const $courseName = tr.querySelector('.course-name').value;
    const $courseCP = tr.querySelector('.course-cp').value;
    const $courseOfferIn = tr.querySelector('.course-offerin').value;
    // 通过唯一ID获取对应隐藏输入框的值
    const $specialization = document.getElementById(`spec-hidden-${id}`).value;

    console.log("semester : " + JSON.stringify($semester));
    console.log("courseName : " + JSON.stringify($courseName));
    console.log("courseCP : " + JSON.stringify($courseCP));
    console.log("courseOfferIn : " + JSON.stringify($courseOfferIn));
    console.log("specialization: " + JSON.stringify($specialization));
}

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