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

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(){

        $('#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的div与id等于放在一个中form_container，以便您可以以更清晰的方式更改表单的数量。

<div id="form_container">

    <form class="form-horizontal striped-rows b-form" id="form1">

        ...

    </form>

</div>

然后，您可以使用在循环中append()添加更多一些表单。divfor

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();

});