如何根据组合框的值重复代码多次? JSP Java
how to repeat the code a number of times depending on the value of a combobox ? JSP Java
我有一个视图,它有一个组合框,其值从 2 到 25,是用 制作的(如代码中所示)。
我希望表格重复相同的次数(组合框的值)。但是我已经尝试了很多东西并且搜索了很多页面,但是没有针对这种情况的具体情况,就是我不能在scriplet中放入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/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
我用 js 创建了一个函数来获取组合框的值,为了演示它的工作原理,我创建了一个
标记来显示组合框的值
目前为了在视图中看到一些结果,我将其设置为重复 3 次(foreach begin = '1' end = '3'),我试图将很多东西放在“结束”中,但一切都给出了我的错误或不起作用
总而言之,我想显示组合框显示次数的表单
currently looks like this
您不能仅根据您的 select-box 生成表单,您需要提交该 select-box,然后将 selected 值传递给您的 <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>
我有一个视图,它有一个组合框,其值从 2 到 25,是用
<%@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/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
我用 js 创建了一个函数来获取组合框的值,为了演示它的工作原理,我创建了一个
标记来显示组合框的值
目前为了在视图中看到一些结果,我将其设置为重复 3 次(foreach begin = '1' end = '3'),我试图将很多东西放在“结束”中,但一切都给出了我的错误或不起作用
总而言之,我想显示组合框显示次数的表单
currently looks like this
您不能仅根据您的 select-box 生成表单,您需要提交该 select-box,然后将 selected 值传递给您的 <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>