基于选择选项值的循环形式

Question

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

  <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

好的。因此，首先您需要为所有形式（如“.form-container”）制作一个包装器，然后您需要在 javascript 中创建 html 并将其推入其中。$(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('#sel1').on('change', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;initForms($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('body').on('click', '.btn', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.form-horizontal').each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).show();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; )};&nbsp; &nbsp; });&nbsp; &nbsp; function initForms(formCount){&nbsp; &nbsp; &nbsp; &nbsp; var finalHTML= "";&nbsp; &nbsp; &nbsp; &nbsp; for(i=0, i<formCount; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tempHTML = tempHTML.split("$formid$").join("form-" + i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; finalHTML += tempHTML;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $('.form-container').empty().html(finalHTML);&nbsp; &nbsp; }

Answer 2

我已将您form的div与id等于放在一个中form_container，以便您可以以更清晰的方式更改表单的数量。<div id="form_container">&nbsp; &nbsp; <form class="form-horizontal striped-rows b-form" id="form1">&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; </form></div>然后，您可以使用在循环中append()添加更多一些表单。divforvar num;$('#sel1').on('change', function(event) {&nbsp; &nbsp; alert("This is the value selected in solutions: " + $(this).val());&nbsp; &nbsp; num = $(this).val();&nbsp; &nbsp; var formHTML = $("#form1").html(); // Get the HTML content of '#form1'&nbsp; &nbsp; $('#form_container').html(''); // Clear the contents of form_container&nbsp; &nbsp; for(var i = 0; i < num; i++){&nbsp; &nbsp; &nbsp; &nbsp; var id = i + 1;&nbsp; &nbsp; &nbsp; &nbsp; $('#form_container').append('<form class="form-horizontal striped-rows b-form" id="form'+id+'">'+formHTML+'</form>');&nbsp; &nbsp; }});

Answer 3

表格显示：无<form class="form-horizontal striped-rows b-form" id="form1" style="display:none"></form>$('#sel1').click(function(){&nbsp; &nbsp; $("#form1").show();});