JSP/Spring MVC - 如何使用添加到模型的元素动态填充列表 (javascript/jQuery)答案

【问题标题】：JSP/Spring MVC - How to populate list dynamically with elements added to model (javascript/jQuery)JSP/Spring MVC - 如何使用添加到模型的元素动态填充列表 (javascript/jQuery)
【发布时间】：2020-08-23 23:09:40
【问题描述】：

首先，如果问题不够清楚，我深表歉意。如果方便，我会编辑它，看看这是否可以帮助其他人。

我有一个绑定到 Spring MVC 模型的 JSP 表单，该模型将检索用户输入的信息。问题是我将允许在下面的示例中作为列表（电影）传递的多个提交/条目。每次用户单击添加时，都会克隆字段以允许新条目（并且先前的字段被隐藏/删除）。最后，当点击提交时，表单被提交到控制器以持久化数据。

一切正常。我想要实现的是创建一个列表，以动态显示每次用户点击添加时正在添加的所有条目。

这就是我的列表（为简单起见，这里只有一个字段）

<form:form id="myForm" method="post" modelAttribute="cinema" action="submitMovies">
    <!-- List to be filled dynamically with elements from my model (now empty) ->
     <div id="files" class="list-section collapse in">
        <div class="item-list-container" id="groupedList">
            <div class="labels">
                <div class="item">Title</div>
            </div>
            <div class="grey-background">
                <c:forEach items="movies" var="movie" varStatus="loop" >
                    <div class="itemContainer">
                        <div class="subGroup ">
                            <div class="item " id="">Want to display names entered in form here i.e fourth row would show content of movies[3].movieName</div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
     </div>

（我的问题并不真正需要，但想象我的模型是一个带有列表电影的类 Cinema；而且 Movie.class 会有一个 String movieName 属性。）

我有那个 forEach 但单击添加后列表没有添加一行。所以很明显这并没有刷新它的内容。

使用一个字段和“添加”按钮添加以下表单的其余部分。 Add 按钮只是克隆 Clone Item div 中的内容并更改字段的 id。例如： <form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName" 最初是 id="movieName0" 绑定到 movies[0].movieName 并在 Add 之后创建一个新元素，movieName1 绑定到 movies[1].movieName

再一次，这工作正常。我正在寻找的唯一方法是当我单击添加并创建元素（movieName1 绑定到 movies[1].movieName）时在该列表/表格中动态显示一个新行，其中包含以前在表单中的信息（movieName0 绑定到 movies[0].movieName）

    <!-- List to be filled dynamically with elements from my model (now empty) ->
     <div id="files" class="list-section collapse in">
        <div class="item-list-container" id="groupedList">
            <div class="labels">
                <div class="item">Title</div>
            </div>
            <div class="grey-background">
                <c:forEach items="movies" var="movie" varStatus="loop" >
                    <div class="itemContainer">
                        <div class="subGroup ">
                            <div class="item " id="">Want to display names entered in form here</div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
     </div>

     <!-- Start Clone Item -->
     <div class="cloneList" data-count="${movies.size() + 0}">
     <c:forEach items="movies" var="movie" varStatus="loop" begin="0" >
     <!-- Cloned item -->
        <div class="cloneItem" id="innerItem${loop.index}">
            <div id="movieNameField${loop.index}" class="form-group">
                 <label for="movieName${loop.index}">NAME</label>
                 <div class="status-container">
                    <form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName" maxlength="35" class="form-control"/>
                 </div>
                 <form:errors path="movies[${loop.index}].movieName" cssClass="errorShow" element="div"/>
            </div>
        </div>
     </c:forEach>
     </div>
     <!-- End Clone -->

     <div class="row">
        <div class="col">
            <a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()"><spring:message code="button.add" /></a><br>
        </div>
     </div>

     <!-- More code to submit form etc -->
</form:form>```


**EDIT:** addMovie() content added as requested.

function addMovie() {

var target = $('.cloneList');

//Keep track of number of movies
var listCount = $('.cloneList').attr("data-count");

var innerItem = $('div[id^="innerItem"]:last');

var num = parseInt(innerItem.prop("id").match(/\d+/g), 10) + 1;
$('.cloneList').attr("data-count", num);

var clone = innerItem.clone().prop('id', 'innerItem' + num).find("input:text").val("").end();

clone.find('#movieName' + listCount).attr("name","movies[" + num + "].movieName").attr("id","movieNameField" + num).text("");
clone.find('#movieNameField' + listCount).attr("id","movieNameField" + num).text("");

target.append(克隆);

【问题讨论】：

所以您需要用户在输入字段中输入的任何内容，同时克隆也应该在此处显示<div class="item " id=""></div>？你也可以发布你的addMovie() 代码吗？
是的。我想一个选项是让表也克隆一行并显示相同的值。但我宁愿找到一种方法来显示绑定的实际内容，即movies[2].movieName。我将使用 addMovie() 的内容进行编辑
另外，您需要在输入框中显示值或仅显示文本，即：movies1,movies2 .etc？
价值观，当然
嗨，你试过下面的代码吗？这对你有用吗？

标签： javascript jquery spring-mvc jsp jstl

【解决方案1】：

您可以遍历输入的values，然后将这些值添加到需要显示名称的 div 中。在下面的代码中，我使用<ul></ul> 标签在 div 中显示列表，但是，您可以在此处添加输入字段与您生成的名称相同，以便绑定到所需的值。

我已经对您的 jquery 代码进行了一些更改，因为以前它没有正确附加输入。所以，我已经纠正了这一点，现在每个新行都将附加到 cloneItem 中。

演示代码：

function addMovie() {
  var values = ""; //declare this
  //Keep track of number of movies
  var listCount = $('.cloneList').attr("data-count");
  var innerItem = $('div[id^="innerItem"]:last');
  var num = parseInt(innerItem.prop("id").match(/\d+/g), 10) + 1;
  $('.cloneList').attr("data-count", num);

  var clone = innerItem.clone().prop('id', 'innerItem' + num).find("input:text").val("").end();
  //added this to show label attr correct value
  clone.find("label").attr("for", "movieNameField" + num)
  clone.find('#movieName' + listCount).attr("name", "movies[" + num + "].movieName").attr("id", "movieNameField" + num).attr('path', "movies[" + num + "].movieName").text("");
  clone.find('#movieNameField' + listCount).attr("id", "movieNameField" + num);

  clone.insertAfter("div.cloneItem:last")
  values = "<ul>"
  //loop through all inputs
  $(".cloneItem").find("input.values").each(function() {
    //check if values ! =null
    if ($(this).val() != "") {
      //append
      values += "<li>" + $(this).val() + " </li>"
    }
  })
  values += "</ul>"
  //add values to div
  $("#displays").html(values)
}

li {
  font-size: 14px;
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="files" class="list-section collapse in">
  <div class="item-list-container" id="groupedList">
    <div class="labels">
      <div class="item">Title</div>
    </div>
    <div class="grey-background">
      <div class="itemContainer">
        <div class="subGroup">
          <!--added id-->
          <div class="item " id="displays">Want to display names entered in form here</div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Start Clone Item -->
<div class="cloneList" data-count="1">
  <!-- Cloned item -->
  <div class="cloneItem" id="innerItem1">
    <div id="movieNameField1" class="form-group">
      <label for="movieName1">NAME</label>
      <div class="status-container">
        <!--added extra class=values-->
        <input id="movieName1" path="movies[1].movieName" maxlength="35" value="Movies1" class="form-control values" />
      </div>
      <form:errors path="movies[1].movieName" cssClass="errorShow" element="div" />
    </div>
  </div>

</div>
<!-- End Clone -->

<div class="row">
  <div class="col">
    <a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()">
     Add
    </a><br>
  </div>
</div>

【讨论】：