用户列表下拉框仅获取首个用户值，求实现全量异步更新功能

循环渲染用户列表时，所有下拉框、用户ID隐藏框和按钮都使用了重复的ID（user-type-select、userId、update-user-type），而DOM中ID必须唯一，导致getElementById只会返回第一个匹配元素，无法获取当前点击行对应的用户数据。

1. 修改EJS模板（users.ejs） #

移除重复ID改用类名标识，给下拉框默认选中当前用户类型，确保每个用户行的元素可精准定位：

<table class="table">
    <thead>
        <tr>
              ...
        </tr>
    </thead>
    <tbody class="user-body">
        <% for (let user of users) { %>
            <tr class="user">
                <th scope="row"><%= user.user_id %></th>
                <td><%= user.username %></td>
                <td><%= user.email %></td>
                <td><%= user.user_type %></td>
                <td>
                    <select name="user-types" class="form-select mb-3 user-type-select">
                        <option value="admin" <%= user.user_type === 'admin' ? 'selected' : '' %>>Admin</option>
                        <option value="dealer" <%= user.user_type === 'dealer' ? 'selected' : '' %>>Dealer</option>
                        <option value="user" <%= user.user_type === 'user' ? 'selected' : '' %>>User</option>
                    </select>
                    <input type="hidden" value="<%= user.user_id %>" name="userId" class="user-id">
                    <button class="button update-user-type" type="button">Update User Type</button>
                </td>
                <td><%= user.is_active %></td>
            </tr>
        <% } %>
    </tbody>
</table>

2. 修改JS脚本（adminUsersScript.js） #

通过事件目标定位当前用户行，获取对应数据并实现异步提交：

document.addEventListener("click", (e) => {
    if (e.target && e.target.classList.contains("update-user-type")) {
        // 定位当前用户行
        const userRow = e.target.closest('.user');
        // 获取当前行的下拉框选中值
        const selectedType = userRow.querySelector('.user-type-select').value;
        // 获取当前用户ID
        const userId = userRow.querySelector('.user-id').value;

        console.log(`用户ID: ${userId}, 选中类型: ${selectedType}`);

        // 异步提交修改请求
        fetch('/api/update-user-type', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ userId, userType: selectedType }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新页面显示的用户类型
                userRow.querySelector('td:nth-child(4)').textContent = selectedType;
                alert('用户类型更新成功');
            } else {
                alert('更新失败，请重试');
            }
        })
        .catch(error => {
            console.error('更新出错:', error);
            alert('更新出错，请检查控制台');
        });
    }
});

• 用closest('.user')快速定位当前用户行，避免DOM遍历混乱
• 在当前行内用querySelector获取元素，确保数据对应当前用户
• 异步提交后直接更新页面显示，提升用户体验

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