如何用JavaScript实现下拉选中时关联textfield设为必填？

当然可以用JavaScript实现这个动态必填的表单验证逻辑！下面我会一步步给你拆解实现思路，再附上完整的可运行代码：

• 关联下拉选项与输入框：让下拉菜单的每个选项value和对应输入框的name保持一致，这样JS可以轻松找到选中选项对应的输入框。
• 动态切换必填状态：监听下拉菜单的change事件，每次切换选项时，先重置所有输入框的必填状态，再给当前选中选项对应的输入框加上必填限制。
• 表单提交校验：在表单提交时，检查当前选中选项对应的输入框是否为空，若为空则阻止提交并给出提示。

<form id="myForm">
  <select id="colorSelect">
    <option value="">请选择选项</option>
    <option value="red">one</option>
    <option value="blue">two</option>
    <option value="green">three</option>
  </select>

  <div>
    <label for="red">补充内容（选填，选中one时必填）：</label>
    <input name="red" id="red" type="text" placeholder="输入red的补充内容">
  </div>
  <div>
    <label for="blue">补充内容（选填，选中two时必填）：</label>
    <input name="blue" id="blue" type="text" placeholder="输入blue的补充内容">
  </div>
  <div>
    <label for="green">补充内容（选填，选中three时必填）：</label>
    <input name="green" id="green" type="text" placeholder="输入green的补充内容">
  </div>

  <button type="submit">提交</button>
</form>

<script>
// 获取DOM元素
const colorSelect = document.getElementById('colorSelect');
const myForm = document.getElementById('myForm');
const inputFields = document.querySelectorAll('input[type="text"]');

// 监听下拉菜单的切换事件
colorSelect.addEventListener('change', function() {
  // 先重置所有输入框的必填状态
  inputFields.forEach(input => {
    input.removeAttribute('required');
    // 移除之前的错误提示样式
    input.style.border = '';
  });

  // 获取当前选中的选项值
  const selectedValue = this.value;
  if (selectedValue) {
    // 找到对应的输入框并设置为必填
    const targetInput = document.querySelector(`input[name="${selectedValue}"]`);
    if (targetInput) {
      targetInput.setAttribute('required', true);
    }
  }
});

// 监听表单提交事件，做最终校验
myForm.addEventListener('submit', function(e) {
  const selectedValue = colorSelect.value;
  if (selectedValue) {
    const targetInput = document.querySelector(`input[name="${selectedValue}"]`);
    if (!targetInput.value.trim()) {
      // 阻止表单提交
      e.preventDefault();
      // 给用户直观的错误提示
      targetInput.style.border = '1px solid red';
      alert(`请填写${selectedValue}对应的补充内容！`);
    }
  }
});
</script>

• HTML结构：给表单、下拉菜单加上ID，输入框的name和对应下拉选项的value一一对应，方便JS快速定位元素。
• 下拉切换逻辑：每次切换选项时，先清除所有输入框的required属性，再给当前选中选项对应的输入框添加required，确保只有选中的那个输入框是必填的。
• 提交校验：即使用户绕过了前端的required属性（比如通过控制台修改），提交时的二次校验也能确保必填项不为空，同时给用户清晰的错误提示。

这样实现后，就能完美满足你的需求：平时输入框都可以为空，只有当选中对应的下拉选项时，该选项关联的输入框才会变成必填项，提交时会强制校验。

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