如何在JSP动态添加的表格行select中追加JS变量allPosts的选项？

要实现把allPosts数组里的选项填充到新添加的下拉框里，你只需要在构建HTML字符串的时候，循环遍历allPosts数组，动态生成对应的<option>标签即可。下面是修改后的addMore函数，同时也优化了一些细节：

function addMore(attr) {
    // 1. 构建下拉框的选项：先添加默认的"请选择"选项
    let options = '<option value="0">请选择</option>';
    
    // 2. 遍历allPosts数组，生成每个选项
    allPosts.forEach(post => {
        options += `<option value="${post.id}">${post.name}</option>`;
    });
    
    // 3. 构建完整的表格行HTML，把生成的选项插入到select中
    const data = `<tr>
        <td style='padding: 2px;vertical-align:middle;border: 1px solid'>
            <select name='postId'>
                ${options}
            </select>
        </td>
        <td style='padding: 20px' class='noBorder-fa'>
            <!-- 注意：避免重复ID，把id改成class -->
            <img class='addMoreImage' src='/images/Plus.png' onclick='addMore(${attr})' alt='<fmt:message key="button.addRow"></fmt:message>' >
        </td>
    </tr>`;
    
    $("#customPostTable").append(data);
}

关键说明： #

• 循环生成选项：通过forEach遍历allPosts数组，每个post对象的id作为选项的value，name作为选项的显示文本，和你原来JSP里的<form:options items="${posts}" itemValue="id" itemLabel="name"/>逻辑完全一致。
• 默认选项：保留了原有的默认选项（value="0"），确保新行的下拉框和初始行的行为一致。
• 避免重复ID：原来的<img>使用了重复的id="addMoreImage"，这不符合HTML规范（ID必须唯一），所以改成了class='addMoreImage'，如果后续需要通过选择器操作这些按钮，用类选择器更合适。

额外注意点： #

如果你的allPosts数组是通过后端的postsString传递过来的，要确保postsString是合法的JSON格式（比如后端用Jackson或者Gson把posts集合转成JSON字符串），这样在前端才能正确解析为JavaScript数组。如果还没处理这一步，你可以在接收attr的时候先解析：

// 如果attr是JSON字符串，先解析成数组
const allPosts = JSON.parse(attr);
// 然后再执行上面的循环逻辑

这样修改后，每次点击添加按钮，新行的下拉框就会自动填充allPosts里的所有选项了。

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