EJS中Select的onchange仅对首个迭代元素生效的修复需求

问题原因 #

1. 全局选择器范围错误：原代码里$('.pay_method :selected').val()只会取页面中第一个.pay_method的选中值，操作$('.paymentMethod')会影响所有组的支付区域，而非当前触发事件的那一组。
2. 无分组上下文关联：下拉框和对应支付区域没有绑定到同一组容器中，事件触发时无法定位到当前组的目标元素。

修改步骤 #

1. 调整EJS模板，给每组元素添加独立容器

迭代渲染时，用容器包裹每组的下拉框和支付区域，确保每组元素逻辑独立：

<% // 假设这里是你的循环逻辑，比如遍历支付项数组 %>
<% paymentItems.forEach(item => { %>
<div class="payment-group">
  <select class="pay_method">
    <option selected>Select bank</option>
    <option value="1">银行1</option>
    <option value="2">银行2</option>
    <option value="3">银行3</option>
  </select>
  <div class="paymentMethod p1" style="display: none;">
    <p>银行1账户信息</p>
  </div>
  <div class="paymentMethod p2" style="display: none;">
    <p>银行2账户信息</p>
  </div>
</div>
<% }) %>

注：给默认不显示的支付区域加上display: none，避免页面加载时全部展示

2. 修改JS事件处理逻辑

针对当前触发事件的下拉框，限定操作范围在所属组内：

// 页面加载完成后绑定事件（适用于初始化时已渲染的元素）
$(".pay_method").change(function () {
  // 获取当前触发事件的下拉框
  const $currentSelect = $(this);
  // 定位到当前组的容器
  const $currentGroup = $currentSelect.closest(".payment-group");

  // 隐藏当前组内所有支付区域
  $currentGroup.find(".paymentMethod").slideUp();

  // 获取当前下拉框的选中值
  const selectedValue = $currentSelect.val();

  // 根据选中值显示对应支付区域
  switch (selectedValue) {
    case "1":
      $currentGroup.find(".p1").slideDown();
      break;
    case "2":
      $currentGroup.find(".p2").slideDown();
      break;
    default:
      // 选中默认选项时保持所有区域隐藏
      break;
  }
});

如果元素是动态异步渲染的（比如通过AJAX加载后添加到页面），请使用事件委托方式绑定，确保新生成的元素也能触发事件：

// 事件委托方式，绑定到静态父元素（也可以用更贴近的静态容器替代document）
$(document).on("change", ".pay_method", function () {
  const $currentSelect = $(this);
  const $currentGroup = $currentSelect.closest(".payment-group");

  $currentGroup.find(".paymentMethod").slideUp();

  const selectedValue = $currentSelect.val();

  switch (selectedValue) {
    case "1":
      $currentGroup.find(".p1").slideDown();
      break;
    case "2":
      $currentGroup.find(".p2").slideDown();
      break;
    default:
      break;
  }
});

核心修改点 #

• 用$(this)获取当前触发事件的下拉框，确保取到的是当前组的选中值
• 通过closest(".payment-group")锁定当前组范围，避免影响其他组元素
• 操作支付区域时，用$currentGroup.find()替代全局选择器，只对当前组内元素生效

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