基于选择选项值的循环表单

Question

我有选择选项输入。当我选择上面的数字并单击按钮时，我想显示表单。根据我选择的选择选项显示的表单数量。我不知道如何在jquery中循环它并使表单显示：none(在按钮单击表单之前不可见(。是否可以同时在一个表中输入多个数据以及如何做到这一点？我试过这个 谢谢

<div class="form-group col-sm-6">
<label for="sel1">Jrekrut : </label>
<select class="form-control" name="sel1" id="sel1" >
<option selected>Pilih</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option> </select>
</div>
<form class="form-horizontal striped-rows b-form" id="form1">
<div class="card-body">
<div class="form-group row">
<div class="col-sm-3">
<div class="b-label">
<label for="inputEmail3" class="control-label col-form-label">Full Name</label>
</div>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here">
</div>
</div>
</form>
<script type="text/javascript">
var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
});
$("#btn").click(function(){
//$("#form1").hide();
$("#form1").toggle();
console.log(num);
});

Answer 1

Okey。因此，首先您需要为所有表单(如".form-container"(制作一个包装器，接下来您需要在javascript中创建html并推送到其中。

$(document).ready(function(){
$('#sel1').on('change', function(event) {
initForms($(this).val());
});
$('body').on('click', '.btn', function(){
$('.form-horizontal').each(function(){
$(this).show(); 
});
)};
});
function initForms(formCount){
var finalHTML= "";
for(i=0, i<formCount; i++){
var tempHTML ='<form id="$formid$" class="form-horizontal striped-rows b-form" style="display:none;"><div class="card-body"><div class="form-group row"><div class="col-sm-3"><div class="b-label"><label for="inputEmail3" class="control-label col-form-label">Full Name</label></div></div><div class="col-sm-9"><input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here"></div></div></div></form>';
tempHTML = tempHTML.split("$formid$").join("form-" + i);
finalHTML += tempHTML;
}
$('.form-container').empty().html(finalHTML);
}

Answer 2

我已将您的form放在id等于form_container的div中，以便您可以以更简洁的方式更改表单的数量。

<div id="form_container">
<form class="form-horizontal striped-rows b-form" id="form1">
...
</form>
</div>

然后，您可以使用append()在for循环中向div添加更多表单。

var num;
$('#sel1').on('change', function(event) {
alert("This is the value selected in solutions: " + $(this).val());
num = $(this).val();
var formHTML = $("#form1").html(); // Get the HTML content of '#form1'
$('#form_container').html(''); // Clear the contents of form_container
for(var i = 0; i < num; i++){
var id = i + 1;
$('#form_container').append('<form class="form-horizontal striped-rows b-form" id="form'+id+'">'+formHTML+'</form>');
}
});

Answer 3

表单显示：无

<form class="form-horizontal striped-rows b-form" id="form1" style="display:none">
</form>
$('#sel1').click(function(){
$("#form1").show();
});