如何使用jQuery与Bootstrap v5根据select下拉选择控制表单显隐

修正&实现代码 #

HTML部分

先修正下拉框不符合HTML规范的写法，补充对应选项，选项value和表单id一一对应：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- 修正后的下拉框结构 -->
<select name='select_from' class='form-control' id='select_report'>
  <option value="">(请选择)</option>
  <option value="form_one">表单1</option>
  <option value="form_two">表单2</option>
  <option value="form_three">表单3</option>
  <option value="form_four">表单4</option>
  <option value="form_five">表单5</option>
</select>

<div class='form-row d-none' id='form_one'>表单1输入项</div>
<div class='form-row d-none' id='form_two'>表单2输入项</div>
<div class='form-row d-none' id='form_three'>表单3输入项</div>
<div class='form-row d-none' id='form_four'>表单4输入项</div>
<div class='form-row d-none' id='form_five'>表单5输入项</div>

JS部分

修正原代码id选择器不匹配的问题，补全切换逻辑：

$('#select_report').on('change', function() {
  const targetId = this.value;
  // 隐藏所有表单
  $('.form-row').addClass('d-none').removeClass('d-block');
  // 选中有效选项时显示对应表单
  if(targetId) {
    $('#' + targetId).removeClass('d-none').addClass('d-block');
  }
})

注意事项 #

• 所有表单容器统一使用form-row类做批量选择，不用单独枚举5个表单的id，后续新增表单只要加同名类即可自动适配
• 切换类时同步移除对立的样式类，避免d-none和d-block同时存在导致样式失效
• 下拉框选项的value需要和对应表单的id完全一致，否则无法正常匹配显示

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