javascript - 如果数字发生变化，则更改 Web 表单元素

Question

我有一个网络表单，它会根据用户勾选的数字添加问题(即在下拉框中输入他们有 5 个 child ，它会为这 5 个 child 中的每一个添加问题。)

当您第一次点击它时，我可以让它动态添加所需数量的字段，但如果他们稍后选择了不同数量的 child ，我将如何更新它？

我的功能如下:

HTML

<label for="kids" class="kidsno">Number of children</label>
<select type="number" id="kids" class="kidsno" required onchange="KidsInfo()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

JavaScript

function KidsInfo() { 
    var num = $('#kids').val(); 
       inum = parseInt(num); 
       var $name = $('<ul class="flex-outer"> <li> <label for="kidfirst">First Name *</label><input type="text"' + 
                    ' id="kidfirst" name="kidfirst" placeholder="Enter first name here" required></li> ' + 
                    ' <li> <label for="kidlast">Last Name *</label><input type="text"id="kidlast" name="kidlast" ' + 
                    ' placeholder="Enter last name here" required></li> ') 
       var $age = $('<ul class="flex-outer"><li> <label for="childDOB">Date of Birth *</label>' + 
                    ' <input type="date" id="ChildDOB" name="dateofbirth"> </li><li><label for="kidgen">Gender *</label>' + 
                    '   <input list="gender" id="gen" name="gender" placeholder="Enter or select gender here" required> ' + 
                    '<datalist id="gender"><option value="Male"><option value="Female"> <option value="Prefer not to say"> </datalist></li><br/>') 
        
       $("<legend>Children's Information</legend>").appendTo($(".children")); 
        
    for (i=0; i < inum; i++) { 
        
        $name.add($age).clone().appendTo($(".children")); 
    } 
    $("</ul>").appendTo($(".children")); 
} 

Answer 1

我认为您需要的是一个 onchange 方法来处理所有事情:既增加又减少所需的子记录数。

我在猜测您的表单结构，但下面的方法应该是正确的想法。它根据需要向 DOM 添加/删除子记录，并且如果它们仍将显示，则不会覆盖现有记录(丢失输入数据)。它还使用 .show/.hide 来处理返回零的更新，并且子输入数据的外部容器预先存在于表单中。

function KidsInfo() { 
    var num = $('#kids').val(); 
       inum = parseInt(num); 
       var $name = $('<ul class="flex-outer"> <li> <label for="kidfirst">First Name *</label><input type="text"' + 
                    ' id="kidfirst" name="kidfirst" placeholder="Enter first name here" required></li> ' + 
                    ' <li> <label for="kidlast">Last Name *</label><input type="text"id="kidlast" name="kidlast" ' + 
                    ' placeholder="Enter last name here" required></li> ');
       var $age = $('<ul class="flex-outer"><li> <label for="childDOB">Date of Birth *</label>' + 
                    ' <input type="date" id="ChildDOB" name="dateofbirth"> </li><li><label for="kidgen">Gender *</label>' + 
                    '   <input list="gender" id="gen" name="gender" placeholder="Enter or select gender here" required> ' + 
                    '<datalist id="gender"><option value="Male"><option value="Female"> <option value="Prefer not to say"> </datalist></li><br/>');
      var $childform = $('<div class="childdata"></div>').append($name).append($age);
      
      // first remove extra records if they are there
      $('.childdata').each(function(i, elem) {
          if (i >= inum) {
              $(elem).remove();
          }
      });
      
      // now add records if necessary
      var existing = $('.childdata').length;
      for (var i = existing; i < inum; i++) {
          $('.children').append($childform.clone());
      }
      
      // now show/hide as appropriate
      if (inum > 0) {
          $('.children').show();
      } else {
          $('.children').hide();
      }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="kids" class="kidsno">Number of children</label>
<select type="number" id="kids" class="kidsno" required onchange="KidsInfo()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

<div class="children" style="display: none;">
    <legend>Children's Information</legend>
</div>