如何使用 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"