如何使用 jQuery 传递隐藏的下拉值？

Question

这个场景就像我从数据库中获取数据并将其填充为一个表，这很好并且正在正确填充。 第二件事是我在每一行都有一个添加按钮，当用户点击该按钮时，隐藏的输入值应该传递给 js function。

所有值都正确传递，但下拉字段（选择）的值发送第一行的值，并且对下拉列表的更改仅适用于第一行，其他行下拉值只是空白。

我认为这是由于 id 被定义为所有行的 hidden_spec 并且它不是唯一的。

我尝试了动态名称，例如将 id 与某些值（例如来自 db 的 courseId）连接，但它显示不同的错误，例如Uncaught TypeError: Cannot set properties of null (setting 'value') at HTMLSelectElement.onchange ((index):1:50)

以下是 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">
                <select name="specialization" id="specialization" onchange="document.getElementById('hidden_spec').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"><input type="text" class="form-control text-center semester" name="semester" id="semester" value="23">
            <!-- <td class="text-center align-middle px-0"><a href="#" onclick="toggleNav()" id="addCourse">Add</a></td> -->
            <input class="course-name" type="hidden" name="hidden_course_name" id="hidden_course_name" value="<?php echo $course->name; ?>" />
            <input class="course-cp" type="hidden" name="hidden_course_CP" id="hidden_course_CP" value="<?php echo $course->credit_points; ?>" />
            <input class="course-offerin" type="hidden" name="hidden_course_offerredIn" id="hidden_course_offerredIn" value="<?php echo $dbUtil->getSemester($course->semester_id)[0]->name; ?>" />
            <input class="specialization" type="hidden" name="hidden_specialization" id="hidden_spec" value="" />
        </td>
        <td class="align-middle p-4"><button type="submit" class="<?php echo $course->id; ?>"onclick=addToPlan(this.id) id="<?php echo $course->id; ?>">
                Add
            </button>
        </td>
    </tr>
</form>

以下是 js function：

function addToPlan(id) {
  var $semester = $("." + id).closest("td").siblings("td").find("." + newCourse.semester).val();
  var $courseName = $("." + id).closest("td").siblings("td").find("." + newCourse.courseName).val();
  var $courseCP = $("." + id).closest("td").siblings("td").find("." + newCourse.creditPoint).val();
  var $courseOfferIn = $("." + id).closest("td").siblings("td").find("." + newCourse.courseOfferIn).val();
  var $specialization = $("." + id).closest("td").siblings("td").find("." + newCourse.specialization).val();

  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));
}

以下是第一行的 output（正确）：

semester : "23"
courseName : "Collaborative \nIntelligence"
courseCP : "4"
courseOfferIn : "Summer"
specialization: "spec1"

以下是其他行的 output：

semester : "12"
courseName : "3D Computer \nVision"
courseCP : "4"
courseOfferIn : "Summer"
specialization: ""

每个数据都被正确传递，除了专门化，除第一行外，其他行都是空的。

有人可以帮我解释一下我怎样才能做到这一点吗？

Answer 1

ID hidden_spec不是唯一的，你不能用它来更新隐藏的输入。

改用 class 以及相对于要更改的元素的 DOM 导航

onchange="this.closest('tr').querySelector('specialization').value = this.value"