克隆含Select与Input的Div并清空值、递增表单名称和ID

修改后的完整代码 #

$(function(){
  // 初始化页面现有组件
  $('.selectpicker').selectpicker();
  $('.money').mask('000.000,00 €', {reverse: true});

  $("#addProduct").click(function(){
    // 计算新元素的索引：当前已有的克隆表单行数
    const newIndex = $('.clonedProduct').length;
    // 克隆初始模板，并移除原id避免页面重复id冲突
    const $clone = $("#products").clone().removeAttr('id');
    
    // 重置select选中状态，并重写id和name
    $clone.find('select')
          .val('')
          .attr('id', `product${newIndex}`)
          .attr('name', `product${newIndex}`);
    
    // 清空input值，并重写id和name
    $clone.find('input.money')
          .val('')
          .attr('id', `amount${newIndex}`)
          .attr('name', `amount${newIndex}`);
    
    // 将克隆元素追加到最后一行后面
    $('.clonedProduct').last().after($clone);
    
    // 重新初始化bootstrap-select组件
    $clone.find('select').selectpicker('refresh');
    // 重新绑定jquery mask数字格式规则
    $clone.find('.money').mask('000.000,00 €', {reverse: true});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 补充所需的bootstrap-select和jquery mask依赖 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<div class="row mb-3 clonedProduct" id="products">
  <div class="col-lg-3 col-sm-6">
    <label for="prod_valid" class="form-label">Product</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <!-- 添加selectpicker类，用于bootstrap-select初始化识别 -->
    <select class="bg-light border-tr selectpicker" id="product0" name="product0" aria-label="" title="" data-live-search="true" data-width="100%" required>
        <option></option>
        <option value="1">Apples</option>
        <option value="2">Oranges</option>
        <option value="3">Bananas</option>
    </select>
  </div>
  <div class="col-lg-3 col-sm-6">
    <label for="amount" class="form-label">Amount</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <input type="text" class="form-control money" id="amount0" name="amount0" placeholder="0,00 €">
  </div>   
</div>

<input type="button" class="btn btn-success" value="+" id="addProduct"/>

核心修改说明 #

• 索引自动递增：通过$('.clonedProduct').length获取当前已有的表单行数，直接作为新元素的索引，保证productX和amountX的命名连续不重复。
• 清空原有数据：克隆后通过val('')分别重置下拉框选中状态和输入框内容，确保新行是空白状态。
• 避免重复ID：克隆后的模板移除原id="products"，符合HTML页面id唯一的规范。
• 组件重新激活：
  • Bootstrap-select克隆后不会自动渲染样式，必须调用selectpicker('refresh')重新初始化。
  • Jquery mask的规则不会自动绑定到克隆的输入框，需要重新调用mask()方法绑定格式。

内容的提问来源于stack exchange，提问作者achillix