如何获取HTML Select选中项真实ID值并同步存储至另一数据表

你的问题核心在于当前下拉框的option只绑定了启用状态（0/1）的value，没有将IssueTracker的ID存储到可被JS读取的属性中，导致无法获取目标ID。下面提供两种可行的解决方案，你可以根据现有代码结构选择：

方案1：拆分状态与ID，用隐藏字段存状态 #

这种方式更清晰，将启用状态和选中ID分开传递，后端可以直接接收两个参数分别存入对应表：

修改HTML代码 #

<!-- 隐藏字段：存储启用状态（0=未使用，1=使用） -->
<input type="hidden" name="tracker_enabled" id="tracker_enabled_hidden" 
       th:value="${project.tracker_enabled == T(com.Type.EnumYn).Y ? 1 : 0}">

<!-- 下拉框：value直接绑定IssueTracker的ID -->
<select name="selected_tracker_id" id="tracker_selector">
    <!-- 未使用选项：value为空，选中状态根据原项目状态判断 -->
    <option th:value="" th:text="#{projects.Notused}" 
            th:selected="${project.tracker_enabled != T(com.Type.EnumYn).Y}"></option>
    
    <!-- 使用选项：循环绑定Tracker列表，value为ID，选中状态匹配已选的Tracker -->
    <option th:each="issuetracker : ${issuetrackerList}" 
            th:value="${issuetracker.id}" 
            th:utext="${issuetracker.name}" 
            th:selected="${issuetracker.id == selectedTracker.issue_tracker_id}"></option>
</select>

对应的JS代码 #

$("#tracker_selector").change(function(){ 
    const selectedId = $(this).val();
    // 根据是否选中具体Tracker，更新启用状态
    const enabledStatus = selectedId ? 1 : 0;
    $("#tracker_enabled_hidden").val(enabledStatus);

    // 现在可以拿到选中的ID和启用状态，按需处理
    console.log("选中的Tracker ID:", selectedId);
    console.log("启用状态:", enabledStatus);
});

后端接收时，直接获取tracker_enabled存入原表，selected_tracker_id存入目标数据表即可（注意启用状态为0时，ID可设为null或0，根据业务逻辑调整）。

方案2：保留原结构，用自定义属性存ID #

如果不想大幅修改现有代码结构，可以给option添加自定义data-id属性存储ID，JS读取该属性即可：

修改HTML代码 #

<select name="tracker_enabled" id="tracker_enabled"> 
    <option th:value="0" th:text="#{projects.Notused}" th:data-id="0"></option> 
    <option th:value="1" 
            th:if="${project.tracker_enabled == T(com.Type.EnumYn).Y}" 
            th:each="issuetracker : ${issuetrackerList}" 
            th:utext="${issuetracker.name}" 
            th:selected="${issuetracker.id == selectedTracker.issue_tracker_id}"
            th:data-id="${issuetracker.id}"> <!-- 添加data-id存储Tracker ID -->
    </option> 
</select>

对应的JS代码 #

$("#tracker_enabled").change(function(){ 
    const selectedOption = $(this).find("option:selected");
    const enabledValue = selectedOption.val(); // 拿到0或1的状态值
    const selectedTrackerId = selectedOption.data("id"); // 拿到对应的Tracker ID

    console.log("启用状态:", enabledValue);
    console.log("选中的Tracker ID:", selectedTrackerId);
    
    // 可以将selectedTrackerId存入隐藏字段，或者提交时一起发送到后端
});

这种方式下，后端需要判断：如果tracker_enabled为0，selectedTrackerId可以忽略或设为null；如果为1，则将selectedTrackerId存入目标表。

问题根源说明 #

你之前的代码中，option的th:value只设置了0或1，JS调用val()只能获取这个状态值，而IssueTracker的ID没有被嵌入到option的任何属性中，自然无法读取。只要将ID绑定到option的value或自定义data-*属性，就能让JS获取到目标值。

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