Question

我试图根据数值类型中的数字类型添加X个字段，当值增加时。

我的模板：

<div class="form-group row">
  <label for="inputEmail3" class="col-sm-10 col-form-label">{l s='Nombre de voyageurs' mod='blocksouhaits'}</label>
  <div class="col-sm-2">
    <input type="number" class="form-control" id="nbVoyager">
  </div>
</div>
<div class="form-group row">
  <div class="col-sm-6">
    <input type="text" class="form-control" id="lastnameVoyager" placeholder="Nom">
  </div>
  <div class="col-sm-6">
    <input type="text" class="form-control" id="firstnameVoyager" placeholder="Prénom">
  </div>
</div>

根据nbVoyager字段中的值，我想添加带有lastnameVoyager和firstnameVoyager字段的X行。

我该如何以一种简单的干净方式做到这一点？

谢谢。

Answer 1

您可以使用.change(function()来检测输入字段中所做的更改，并获取字段val()并将其循环多次。然后，在循环中，您可以append用您的div代码html

$( "#nbVoyager" ).change(function() {
  var rows = $(this).val();
  $(".last").empty();
  $(".first").empty();
    for (i = 0; i < rows; i++) { 
      $(".first").append('<input type="text" class="form-control" id="lastnameVoyager" placeholder="Nom">');
      $(".last").append('<input type="text" class="form-control" id="firstnameVoyager" placeholder="Prénom">');      
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group row">
            <label for="inputEmail3" class="col-sm-10 col-form-label">{l s='Nombre de voyageurs' mod='blocksouhaits'}</label>
            <div class="col-sm-2">
                <input type="number" class="form-control" id="nbVoyager">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-6 last"></div>
            <div class="col-sm-6 first"></div>
</div>

根据数字添加字段（jQuery）

1 个答案: