Question

我的jsp中有一个带组合框的表：

<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
  <table id="customPostTable" >
    <td>
        <form:select path="postId">
            <form:option value="0" id="PleaseSelect2"/>
            <form:options items="${posts}" itemValue="id" itemLabel="name"/>
        </form:select>
        <form:errors path="postId"/>
    </td>
    <td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
        <img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")'  alt="<fmt:message key="button.addRow"></fmt:message>">
    </td>
  </table>
</form:form>

现在，我想通过单击JavaScript中的按钮向该表追加另一行。 allPosts是一个包含java脚本中的组合框项的数组。我追加到表的jsp代码如下：

function addMore(attr) {
    var data = "";
    data = "<tr>" +
           "<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
           "<select name='postId'>" +
           "</select>" +
           "</td>"+
           "<td style='padding: 20px'  class='noBorder-fa' >" +
           "<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")'  alt='<fmt:message key="button.addRow"></fmt:message>' > " +
           "</td>" ;

   $("#customPostTable").append(data);
}

如何将选项附加到JavaScript中具有allPosts值的select元素？

Answer 1

这是否适合您：

function addMore(attr) {
    allPosts = ["One", "Two", "Three"];
    var data = "";
    all_Posts_Options = "";
    for(var i=0; i<allPosts.length; i++) {
      all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
    }
    data = "<tr>" +
           "<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
           "<select name='postId'>" +
           all_Posts_Options +
           "</select>" +
           "</td>"+
           "<td style='padding: 20px'  class='noBorder-fa' >" +
           "<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()'  alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
           "</td>" ;

   $("#customPostTable").append(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>

请注意，通过HTML插入新元素不推荐 应使用DOM操作工具。见MDN

将JavaScript变量附加到option元素

1 个答案: