如何用JavaScript/jQuery实现根据父输入值动态生成多级联动输入框

API 探路者

2026-10-3

实现方案

核心改造逻辑如下：

放弃固定ID绑定逻辑，改用事件委托监听所有动态生成的输入框变更事件
每次输入框值变更时，先移除当前输入框之后所有动态生成的输入行，避免重复生成冗余节点
当输入值不等于100时，动态创建新的输入行，计算差值自动赋值给新输入框

完整代码

CSS

.dynamic-row {
  margin-top: 10px;
}
.dynamic-row-hidden {
  display: none;
}
.dinput {
  padding: 4px 6px;
}

HTML

<!-- 初始输入框 -->
<div class="input-group">
  <input class="dynamic-input dinput" required="required" type="text" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

JavaScript

(function($) {
  var minNumber = 0;
  var maxNumber = 100;

  // 事件委托适配所有动态生成的输入框
  $(document).on("change", ".dynamic-input", function() {
    var $currentInput = $(this);
    // 清空当前输入框后续所有动态生成的输入节点
    $currentInput.closest('.input-group').nextAll('.input-group').remove();

    // 输入值格式化处理
    var inputVal = parseFloat($currentInput.val().replace("%", "")) || 0;
    inputVal = inputVal < minNumber ? 0 : inputVal;
    inputVal = inputVal > maxNumber ? 100 : inputVal;
    $currentInput.val(inputVal + "%");

    // 差值不为0时生成下一级输入框
    if (inputVal !== 100) {
      var nextVal = 100 - inputVal;
      var $newGroup = $('<div class="input-group dynamic-row"></div>');
      var $newInput = $('<input class="dynamic-input dinput" required="required" type="text" />');
      $newInput.val(nextVal + "%");
      $newGroup.append($newInput);
      $currentInput.closest('.input-group').after($newGroup);
    }
  });
})(jQuery);