将JavaScript变量附加到option元素

Question

I have a table with combo box in my 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>

Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script. My jsp code for append to table is as follows:

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);
}

How can I append options to the select element with value of allPosts in JavaScript?

Answer 1

Does this works for you:

 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> 

Please note that inserting new elements via HTML is not recommended .
DOM manipulation tools shall be used instead . See MDN