如何使用 jQuery 和 Bootstrap v5 基于选择元素隐藏/显示表单答案

【问题标题】：How do you hide/show forms based on select element using jQuery and Bootstrap v5如何使用 jQuery 和 Bootstrap v5 基于选择元素隐藏/显示表单
【发布时间】：2022-01-09 22:30:00
【问题描述】：

我创建了 5 个表单，在页面顶部我有一个 select 输入。我通过使用 Bootstrap 类 .d-none 将它们包装在 div 元素中来隐藏表单。我希望能够从下拉列表中选择一个选项并让 jQuery 先重新隐藏表单，然后再显示正确的表单。

到目前为止，我只能编写一个脚本来检查select_form 的值。

Bootstrap v5 & jQuery v3.2.1

$('#select_form').on('change', function() {
  alert(this.value)
  /* 
   ** Hide ALL Forms (1-5) by adding .d-none class
   ** Check Value of Select
   ** Match Select Value to the correct form's ID
   ** Display the correct form by adding .d-block class
   */

})

<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' label='Select Form' id='select_report' list='form_list' defaulttext='(Please Select)' />
<div class='form-row d-none' id='form_one'>Form Inputs Here</div>
<div class='form-row d-none' id='form_two'>Form Inputs Here</div>
<div class='form-row d-none' id='form_three'>Form Inputs Here</div>
<div class='form-row d-none' id='form_four'>Form Inputs Here</div>
<div class='form-row d-none' id='form_five'>Form Inputs Here</div>

【问题讨论】：

jQuery Learning Center
脚本中已经列出了必要的步骤。如果您搜索这些单个步骤，您肯定能够通过您首选的搜索提供商找到必要的答案。
我做了一个sn-p。您有错别字 - 警报后的句号和* / 之间的空格请为minimal reproducible example 添加相关代码
另外，选择有 name="select_from" 而不是 select_form 但您使用 $("#...") 访问选择的 ID，在这种情况下是 select_report

标签： jquery forms function display bootstrap-5

【解决方案1】：

你确实需要注意拼写

您将 select_report 作为 ID，将 select_from 作为名称。

我在这里使用你的 ID，如果 ID 与选择的文本匹配，则关闭 d-none 类

$('#select_report').on('change', function() {
  const text = $("option:selected", this).text().toLowerCase();

  $(".form-row").each(function() {
    $(this).toggleClass("d-none", this.id !== `form_${text}`)
  })
})

<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_form' class='form-control' label='Select Form' id='select_report' list='form_list' defaulttext='(Please Select)'>
  <option value=""></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>
<div class='form-row d-none' id='form_one'>Form 1 Inputs Here</div>
<div class='form-row d-none' id='form_two'>Form 2 Inputs Here</div>
<div class='form-row d-none' id='form_three'>Form 3 Inputs Here</div>
<div class='form-row d-none' id='form_four'>Form 4 Inputs Here</div>
<div class='form-row d-none' id='form_five'>Form 5 Inputs Here</div>

【讨论】：