как повторить код несколько раз в зависимости от значения поля со списком? JSP Java

У меня есть представление, в котором есть поле со списком со значениями от 2 до 25, созданное с помощью ‹c: ForEach› (как видно из кода). Я хочу, чтобы форма повторялась столько же раз (значение поля со списком). Но я уже много чего перепробовал и перерыл много страниц, но ничего конкретного для этого случая нет, то есть я не могу поставить js код внутри скрипта для получения номера, оставляю код здесь:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>Aca vas a crear tus preguntas</h1>
                    <br>
                    <br><br><br>
                    Cantidad de preguntas:
                    <select id="cantPreguntas"  onchange="getSelectedValue();">
                        <c:forEach var="p" begin="2" end="25">
                            <c:choose>
                                <c:when test="${p==2}">
                                    <option value="${p}" selected="selected"><c:out value="${p}"></c:out></option>
                                </c:when>
                                <c:otherwise>
                                    <option value="${p}"><c:out value="${p}"></c:out></option>
                                </c:otherwise>
                            </c:choose>

                        </c:forEach>
                    </select>
                    <br><br><br><br>

                    <p id='cont'></p>

                    <c:forEach begin="1" end="3">
                        <form class="form form-goup">
                            <label for="txtPregunta">Pregunta num: (num) </label>
                            <input type="text" name="txtPregunta" id="txtPregunta">
                            <br>
                            Cantidad de respuestas
                            <select>
                                <c:forEach var="r" begin="2" end="8">
                                    <option value="${r}"><c:out value="${r}"></c:out></option>
                                </c:forEach>
                            </select> <br>
                            Respuesta (num)<input type="text" name="txtRespuesta" id="txtRespuesta"> <input type="checkbox">
                            <br><br><br><br>
                        </form>
                    </c:forEach>
                </div>
            </div>
        </div>
        <script>
            function getSelectedValue() {
                var selectedValue = document.getElementById("cantPreguntas").value;
                document.getElementById("cont").innerHTML = selectedValue;
            }
            getSelectedValue();
        </script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>



    </body>
</html>

Я сделал функцию с js, которая получает значение поля со списком, и чтобы продемонстрировать, что это работает, я создал тег ‹ p id='cont' ›, чтобы показать значение поля со списком.

В настоящее время, чтобы увидеть какой-то результат в представлении, я настроил его на повторение 3 раза (foreach begin = '1' end = '3'), я пытался поместить много вещей в конец, но все дает мне ошибку или не работает

Таким образом, я хочу показать форму, сколько раз выпадающий список говорит

в настоящее время выглядит так


java html combobox jsp scriptlet
person Jcbreppe    schedule 15.11.2020    source источник
comment
Привет, вам нужно сгенерировать эту форму с помощью js?   -  person Swati    schedule 15.11.2020
comment
@Swati Это возможно, хотя форма генерировалась столько раз, что значение поля со списком все в порядке.   -  person Jcbreppe    schedule 15.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете просто генерировать формы в зависимости от вашего поля выбора, вам нужно либо отправить это поле выбора, а затем передать выбранное значение вашему <c:forEach... Альтернативный способ использования js, вы можете просто использовать clone для клонирования сначала form, а затем просто передать этот cloned html в ваш div, где вам нужно заполнить формы.

Демонстрационный код:

function getSelectedValue() {
  var selectedValue = document.getElementById("cantPreguntas").value;
  document.getElementById("cont").innerHTML = selectedValue;
  var cloned = $("#forms_to_be_cloned form:first").clone(); //get div cloned
  var html = ""; //delare this
  //loop through value from 0 to slected value
  for (var i = 1; i <= selectedValue; i++) {
    html += i + " Form : <br>" + $(cloned).html(); //add htmls inside html variable

  }
  $("#populate_here").html(html) //finnaly add the generate html to div
}
getSelectedValue();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="cantPreguntas" onchange="getSelectedValue();">

  <option value="3">
    3
  </option>
  <option value="4">
    4
  </option>
  <option value="5">
    5
  </option>
  <option value="6">
    6
  </option>

</select>
<p id='cont'></p>
<!--keep this display none will be use for cloning-->
<div id="forms_to_be_cloned" style="display:none">
  <c:forEach begin="1" end="3">
    <form class="form form-goup">
      <label for="txtPregunta">Pregunta num: (num) </label>
      <input type="text" name="txtPregunta" id="txtPregunta">
      <br> Cantidad de respuestas
      <select>
        <c:forEach var="r" begin="2" end="8">
          <option value="${r}">
            <c:out value="${r}"></c:out>
          </option>
        </c:forEach>
      </select> <br> Respuesta (num)<input type="text" name="txtRespuesta" id="txtRespuesta"> <input type="checkbox">
      <br><br><br><br>
    </form>
  </c:forEach>
</div>
<div id="populate_here">
</div>

person Swati    schedule 15.11.2020