如何实现下拉框选择联动修改对应AFUND与AGIFT_AMOUNT输入项？

核心思路 #

监听下拉框的选择事件，根据选中的基金项动态更新表单中隐藏的AFUNDn字段值和金额输入框的AGIFT_AMOUNTn名称，确保提交的字段匹配后端要求的AFUND1-AFUND4、AGIFT_AMOUNT1-AGIFT_AMOUNT4格式。

步骤1：调整HTML结构 #

给下拉选项添加序号标识，同时简化可动态修改的表单字段结构：

<form id="donation-form" action="PaymentTransfer.aspx" class="gift-form" method="post">
  <input name="TRACKING_CODE" type="hidden" value="23385966">
  <div>
    <select id="funds-list" class="">
      <option value="" disabled="disabled" selected="selected">Choose a fund</option>
      <option value="1140742/College of Business Scholarship Fund" data-index="1">College of Business Scholarship Fund</option>
      <option value="114177/College of Business Faculty Excellence Fund" data-index="2">College of Business Faculty Excellence Fund</option>
      <option value="113119/College of Business Innovation Fund" data-index="3">College of Business Innovation Fund</option>
      <option value="113119/College of Business Annual Fund" data-index="4">College of Business Annual Fund</option>
      <option value="113014/College of Business Emergency Scholarship Fund" data-index="1">College of Business Emergency Scholarship Fund</option>
      <!-- data-index指定该基金对应的AFUND/AGIFT_AMOUNT序号，按需调整 -->
    </select>
  </div>
  <div class="giving-fund-input-wrapper" style="display:none;">
    <span class="giving-fund-input-prefix" role="presentation">$</span>
    <input type="hidden" id="dynamic-afund" name="AFUND1" value="">
    <input class="giving-fund-input" id="dynamic-amount" type="number" min="5" name="AGIFT_AMOUNT1" placeholder="Enter gift amount">
  </div>
  <input type="submit" value="Continue">
</form>

步骤2：添加JavaScript逻辑 #

用原生JS监听下拉框变化，自动更新对应字段属性：

// 获取页面元素
const fundsSelect = document.getElementById('funds-list');
const dynamicAfund = document.getElementById('dynamic-afund');
const dynamicAmount = document.getElementById('dynamic-amount');
const inputWrapper = document.querySelector('.giving-fund-input-wrapper');

// 监听下拉选择事件
fundsSelect.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const fundValue = selectedOption.value;
  const fundIndex = selectedOption.dataset.index;

  if (fundValue && fundIndex) {
    // 更新AFUNDn的名称和值
    dynamicAfund.name = `AFUND${fundIndex}`;
    dynamicAfund.value = fundValue;
    // 更新AGIFT_AMOUNTn的名称
    dynamicAmount.name = `AGIFT_AMOUNT${fundIndex}`;
    // 重置金额输入框并显示输入区域
    dynamicAmount.value = '';
    inputWrapper.style.display = 'block';
  } else {
    // 未选择时隐藏输入区域并清空字段
    inputWrapper.style.display = 'none';
    dynamicAfund.value = '';
    dynamicAmount.value = '';
  }
});

补充说明 #

• data-index属性用于绑定基金对应的字段序号（1-4），可根据实际业务需求调整分配规则。
• 选择基金后，表单会自动切换到对应的AFUNDn和AGIFT_AMOUNTn字段，提交时直接符合后端接收要求。
• 默认隐藏金额输入区域，选择基金后再显示，提升用户体验。

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