Bootstrap表单选中指定选项时显示隐藏字段功能失效问题求助

我帮你找出了两个导致功能失效的核心问题，咱们直接来看解决方案：

问题分析 #

1. NodeList集合操作错误：你用document.querySelectorAll('.d-none')获取到的是一个DOM元素集合（NodeList），不是单个元素，直接调用.style.display会因为集合没有这个属性而失效。
2. Bootstrap类优先级冲突：d-none类是Bootstrap内置的，带有!important声明，直接修改元素的style.display会被这个高优先级的类覆盖，导致样式不生效。

修复后的完整代码 #

HTML部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="mailchimp-container">
  <div class="row">
    <div class="col">
      <h1 class="py-3"> Form test </h1>
      <form class="needs-validation" novalidate>
        <div class="form-group">
          <label for="email" class="col-form-label">Email</label>
          <input id="email" name="email" type="email" class="form-control" required>
          <div class="valid-feedback"> Looks good! </div>
        </div>
        <div class="form-group">
          <label for="fname" class="col-form-label">Name</label>
          <input id="fname" name="fname" type="text" class="form-control" required>
          <div class="valid-feedback"> Looks good! </div>
        </div>
        <div class="form-group">
          <label for="target-audience" class="col-form-label">Who are you?</label>
          <select id="target-audience" name="target-audience" class="form-select" required>
            <option disabled selected value="">--</option>
            <option value="8">Fans of cars, motors and bikes</option>
            <option value="16">Fans of flowers</option>
            <option value="24">Fans of food</option>
          </select>
          <div class="invalid-feedback"> Pick proper option </div>
        </div>
        <div class="form-group">
          <label for="location" class="col-form-label">Your location</label>
          <select id="location" name="location" class="form-select" required>
            <option disabled selected value="">--</option>
            <option value="europe">Europe</option>
            <option value="anz">ANZ</option>
            <option value="americas">Americas</option>
          </select>
          <div class="invalid-feedback"> Pick proper option </div>
        </div>
        <div class="form-group d-none">
          <label for="fav-car" class="col-form-label">Favourite car brand</label>
          <input id="fav-car" name="fav-car" type="text" class="form-control">
        </div>
        <div class="form-group d-none">
          <label for="fav-bike" class="col-form-label">Favourite bike brand</label>
          <input id="fav-bike" name="fav-bike" type="text" class="form-control">
        </div>
        <div class="form-group d-none">
          <label for="fav-motorcycle" class="col-form-label text-start">Favourite motorcycle brand</label>
          <input id="fav-motorcycle" name="fav-motorcycle" type="text" class="form-control">
        </div>
        <div class="form-group py-3">
          <button name="submit" type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

CSS部分 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
html, body {
  font-family: 'Poppins', sans-serif;
}
#mailchimp-container h1 {
  font-size:1em;
  text-transform:uppercase;
  font-weight:bold;
}

JavaScript部分（核心修复代码） #

(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation');
  // 获取所有需要隐藏/显示的元素（NodeList集合）
  var showHidden = document.querySelectorAll('.d-none');
  var selectGroup = document.getElementById('target-audience');

  selectGroup.addEventListener('change', function handleChange(event) {
    if (event.target.value === '8') {
      // 遍历集合，移除每个元素的d-none类
      showHidden.forEach(el => el.classList.remove('d-none'));
    } else {
      // 遍历集合，添加d-none类
      showHidden.forEach(el => el.classList.add('d-none'));
    }
  });

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
})()

关键改动说明 #

• 用forEach遍历showHidden集合中的每个元素，通过classList.remove('d-none')和classList.add('d-none')来控制显示隐藏，完美适配Bootstrap的类优先级。
• 保留了你原有的表单验证逻辑，不会影响验证功能的正常运行。

现在你测试一下，选择"Fans of cars, motors and bikes"选项时，对应的三个隐藏字段就会正常显示啦～

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