如何通过JavaScript实现下拉选择时动态切换表单输入字段

第一步：优化基础HTML结构 #

先给下拉框和输入框添加标识，方便JS操作，同时用CSS默认隐藏所有输入字段：

<form id="myForm">
  <p>Select an option:</p>
  <select id="optionSelector">
    <option value="">请选择</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <!-- 给输入框加统一类名，方便批量控制 -->
  <input id="FirstOption" class="optionInput" placeholder="输入选项1内容">
  <input id="SecondOption" class="optionInput" placeholder="输入选项2内容">
  <input id="ThirdOption" class="optionInput" placeholder="输入选项3内容">
  <input id="FourthOption" class="optionInput" placeholder="输入选项4内容">
  <button type="submit">提交</button>
</form>

<style>
/* 默认隐藏所有输入框 */
.optionInput {
  display: none;
  margin-top: 10px;
}
</style>

第二步：编写JS实现显隐控制 #

通过监听下拉框的change事件，根据选中值切换对应输入框的显示状态：

// 获取下拉框和所有输入框元素
const selector = document.getElementById('optionSelector');
const inputFields = document.querySelectorAll('.optionInput');

// 下拉框切换事件
selector.addEventListener('change', function() {
  // 先隐藏所有输入框
  inputFields.forEach(field => {
    field.style.display = 'none';
    // 重置校验状态
    field.setCustomValidity('');
  });

  // 根据选中值显示对应输入框
  const selectedValue = this.value;
  if (selectedValue) {
    const targetId = `${['First', 'Second', 'Third', 'Fourth'][selectedValue - 1]}Option`;
    const targetField = document.getElementById(targetId);
    if (targetField) {
      targetField.style.display = 'block';
    }
  }
});

第三步：添加自定义校验规则 #

给不同输入框绑定校验逻辑，可在表单提交时触发，也支持输入时实时清除错误提示：

const form = document.getElementById('myForm');

// 表单提交时校验
form.addEventListener('submit', function(e) {
  const selectedValue = selector.value;
  if (!selectedValue) {
    e.preventDefault();
    alert('请先选择一个选项');
    return;
  }

  const targetId = `${['First', 'Second', 'Third', 'Fourth'][selectedValue - 1]}Option`;
  const targetField = document.getElementById(targetId);
  
  // 针对不同选项设置自定义校验
  switch(selectedValue) {
    case '1':
      // 选项1：必填且必须是数字
      if (!targetField.value) {
        targetField.setCustomValidity('此字段不能为空');
        targetField.reportValidity();
        e.preventDefault();
      } else if (isNaN(Number(targetField.value))) {
        targetField.setCustomValidity('请输入有效数字');
        targetField.reportValidity();
        e.preventDefault();
      }
      break;
    case '2':
      // 选项2：必填且长度至少5位
      if (!targetField.value || targetField.value.length < 5) {
        targetField.setCustomValidity('内容长度不能少于5位');
        targetField.reportValidity();
        e.preventDefault();
      }
      break;
    case '3':
      // 选项3：必须包含@符号（模拟邮箱校验）
      if (!targetField.value.includes('@')) {
        targetField.setCustomValidity('请输入包含@的内容');
        targetField.reportValidity();
        e.preventDefault();
      }
      break;
    case '4':
      // 选项4：自定义规则，比如不能包含空格
      if (targetField.value.includes(' ')) {
        targetField.setCustomValidity('内容不能包含空格');
        targetField.reportValidity();
        e.preventDefault();
      }
      break;
  }
});

// 输入时清除校验提示
inputFields.forEach(field => {
  field.addEventListener('input', function() {
    this.setCustomValidity('');
  });
});

关键逻辑说明 #

• 用统一类名optionInput批量控制输入框显隐，减少重复代码
• 通过下拉框的value值映射到对应输入框的ID，逻辑清晰易维护
• 自定义校验使用HTML5原生的setCustomValidity()和reportValidity()方法，自带浏览器默认校验提示

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