选择select下拉框other选项时动态生成可增减文本框的实现问题

1. 调整HTML结构 #

修改下拉框和文本容器的代码，默认隐藏文本框区域，同时给下拉框绑定值变化监听事件：

<select class="form-select" aria-label="Default select example" name="textControll" onchange="toggleKidsArea(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="other">3</option>
</select>
<!-- 默认隐藏文本框区域 -->
<div id="kids" style="display: none;">
  Child:
  <input type="text" name="aggr">
  <input type="button" id="add_kid" onclick="addkid()" value="+" />
</div>

2. 补充完善JS逻辑 #

新增显示切换函数，同时补全原有逻辑缺失的计数器初始化代码，避免变量未定义报错：

// 初始化计数器，适配原有增减逻辑
let i = 1;

// 下拉框值变化时切换文本区域显隐
function toggleKidsArea(selectEl) {
  const kidsArea = document.getElementById('kids');
  if (selectEl.value === 'other') {
    kidsArea.style.display = 'block';
  } else {
    kidsArea.style.display = 'none';
    // 隐藏时清空所有新增输入框，重置计数器，避免残留冗余数据
    while (kidsArea.children.length > 1) {
      kidsArea.removeChild(kidsArea.lastChild);
    }
    i = 1;
  }
}

// 原有新增输入框逻辑保持不变
function addkid() {
  if (i <= 3) {
    i++;
    var div = document.createElement('div');
    div.innerHTML = 'Child: <input type="text" name="aggr_'+i+'">'
      + ' <input type="button" value="-" onclick="removekid(this)">';
    document.getElementById('kids').appendChild(div);
  }
}

// 原有删除输入框逻辑保持不变
function removekid(div) {
  document.getElementById('kids').removeChild(div.parentNode);
  i--;
}

功能说明 #

• 默认状态下动态文本框区域完全隐藏，不会占用页面位置
• 仅当下拉框选中other选项时，才会显示文本框和增减按钮
• 切换为非other选项时会自动隐藏区域，同时清空所有新增的输入框、重置计数，避免提交无效数据
• 原有动态增减逻辑完全保留，最多可新增3个带递增值name属性的文本框

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