您如何使用 jQuery 和 Bootstrap v5 hide/show 基于 select 元素的表单

Question

我创建了 5 个表单，在页面顶部我有一个 select 输入。我通过使用 Bootstrap class .d-none 将它们包装在 div 元素中来隐藏表单。我希望能够 select 从下拉列表中选择一个选项，然后让 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>

Answer 1

你确实需要注意拼写

您的 ID 为 select_report，名称为 select_from。

我在这里使用你的 ID，如果 ID 与 select

的文本匹配，我会关闭 d-none class

$('#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>

您如何使用 jQuery 和 Bootstrap v5 hide/show 基于 select 元素的表单

How do you hide/show forms based on select element using jQuery and Bootstrap v5

forms

jquery

function

display

bootstrap-5