表单提交空字段过滤及下拉选框值映射调整技术咨询

1、表单提交自动过滤空值输入项 #

根据你的提交方式二选一即可：

• 走浏览器原生默认提交：在提交事件中把空值输入项设为disabled，浏览器会自动跳过这类字段提交，不需要额外处理

document.querySelector('#你的表单ID').addEventListener('submit', function(e) {
  // 遍历所有表单输入类元素
  this.querySelectorAll('input, select, textarea').forEach(field => {
    // 值为空/全空白则禁用，不会被提交
    if (field.value.trim() === '') {
      field.disabled = true;
    }
  })
})

• 走AJAX提交：拦截提交事件，处理FormData剔除空值后再发送请求

document.querySelector('#你的表单ID').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  // 遍历删除空值字段
  for (const [key, value] of formData.entries()) {
    if (typeof value === 'string' && value.trim() === '') {
      formData.delete(key);
    }
  }
  // 后续提交逻辑示例
  const res = await fetch('你的提交接口地址', {
    method: 'POST',
    body: formData
  });
  const result = await res.json();
  // 处理提交返回结果
})

2、下拉选中值设置为对应显示文本 #

分两种场景处理：

场景A：原有联动逻辑不依赖当前的option-1类value标识 #

直接修改HTML的option属性，把value值和显示文本设为一致即可，无需额外写JS：

<!-- 修改前 -->
<option value="option-1">AS400</option>
<!-- 修改后 -->
<option value="AS400">AS400</option>

场景B：原有联动逻辑需要用到option-1类标识 #

给option加自定义属性存原始value，监听下拉change事件动态替换value为显示文本，不影响原有联动逻辑：

<!-- 给所有option加data-original-value存原始标识 -->
<select id="select-1">
  <option value="option-1" data-original-value="option-1">AS400</option>
  <option value="option-2" data-original-value="option-2">其他系统</option>
</select>
<select id="select-2">
  <option value="option-1a" data-original-value="option-1a">AS400 New Account</option>
</select>

// 监听两个下拉的change事件
const selects = document.querySelectorAll('#select-1, #select-2');
selects.forEach(select => {
  select.addEventListener('change', function() {
    const selectedOpt = this.options[this.selectedIndex];
    // 原有联动逻辑如果需要读原始标识，从selectedOpt.dataset.originalValue取即可
    // 把当前select的value替换为选中项的显示文本
    this.value = selectedOpt.text;
  })
})

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