动态生成区块中下拉选择后输入框不显示及undefined异常问题

嘿，我一眼就揪出几个导致问题的关键点，咱们一步步来解决：

核心问题 #

1. 重复ID冲突：你动态生成的区块里用了和初始区块完全一样的ID（比如contact method、two、three），但DOM里ID必须是唯一的！当你点击添加后，document.getElementById只会找到页面上第一个匹配的元素，后面动态生成的元素根本找不到，这就是你看到undefined和输入框不显示的直接原因。
2. 变量未初始化：addpoc()里的el一开始没赋值，默认是undefined，拼接字符串后会把这个undefined也加到HTML里，导致DOM结构出错。
3. 全局事件无法对应动态元素：showMail()函数是全局查找元素，没法区分是哪个区块的下拉框触发的事件，自然没法正确控制对应区块的输入框显示。

修复后的完整代码 #

我们把ID换成类，用相对元素查找定位当前区块的输入框，同时修复变量初始化和表单字段的兼容性问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clearfix poc-block">
  <div class="name">
    <label for="fname_0">First name:</label><br>
    <input type="text" id="fname_0" name="fname[]" placeholder="Ricky">
  </div>
  <div class="name">
    <label for="lname_0">Last name:</label><br>
    <input type="text" id="lname_0" name="lname[]" placeholder="Ju">
  </div>
</div>
<div class="parent poc-contact" style="width: 100%;">
  <div class="select-container">
    <select class="contact-method" onchange="showMail(this)">
      <option value="" disabled selected hidden>Preferred contact method</option>
      <option value="workmail">Work email </option>
      <option value="personalmail">Personal Email</option>
    </select>
  </div>
  <div class="workmail-input" style="display: none;">
    <input type="email" name="email[]" placeholder="Work email">
  </div>
  <div class="personalmail-input" style="display: none;">
    <input type="email" name="email[]" placeholder="Personal email">
  </div>
</div>
<div>
  <div id="addelement"></div>
  <button id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>

<script>
let pocCount = 1; // 用来给每个区块的输入框生成唯一ID

function addpoc() { 
  let el = ''; // 初始化空字符串，避免undefined混入DOM
  el += `<div class="clearfix poc-block">
          <div class="name">
            <label for="fname_${pocCount}">First name:</label><br>
            <input type="text" id="fname_${pocCount}" name="fname[]" placeholder="Ricky">
          </div>
          <div class="name">
            <label for="lname_${pocCount}">Last name:</label><br>
            <input type="text" id="lname_${pocCount}" name="lname[]" placeholder="Ju">
          </div>
        </div>
        <div class="parent poc-contact" style="width: 100%;">
          <div class="select-container">
            <select class="contact-method" onchange="showMail(this)">
              <option value="workmail" selected>Work email </option>
              <option value="personalmail">Personal Email</option>
            </select>
          </div>
          <div class="workmail-input" style="display: none;">
            <input type="email" name="email[]" placeholder="Work email">
          </div>
          <div class="personalmail-input" style="display: none;">
            <input type="email" name="email[]" placeholder="Personal email">
          </div>
        </div>`;
  $('#addelement').append(el); 
  pocCount++; // 计数递增，保证每个输入框ID唯一
} 

function showMail(selectElement) { 
  // 找到当前下拉框所属的父区块，确保操作的是当前区块的输入框
  const parentBlock = selectElement.closest('.poc-contact');
  const selectedVal = selectElement.value;

  if (selectedVal === "workmail") { 
    parentBlock.querySelector('.workmail-input').style.display = 'block';
    parentBlock.querySelector('.personalmail-input').style.display = 'none';
  } else { 
    parentBlock.querySelector('.personalmail-input').style.display = 'block';
    parentBlock.querySelector('.workmail-input').style.display = 'none';
  } 
} 
</script>

关键改进点 #

• 把所有重复ID换成类，用closest()方法精准定位当前下拉框所属区块，避免全局查找的混乱
• 初始化el为空字符串，彻底解决DOM中出现undefined的问题
• 给动态生成的输入框添加带计数的唯一ID，符合HTML规范
• 把表单name改成数组格式（fname[]、email[]），提交表单时能正确获取所有动态添加的字段值

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