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

I've created 5 forms and at the top of the page I have a select input. I've hidden the forms by wrapping them in a div element with the Bootstrap class .d-none. I'd like to be able to select an option from the drop-down and have the jQuery rehide the forms first then display the correct form.

So, far I've just been able to write a script to check select_form's value.

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

You really do need to take care in spelling

You have select_report as ID and select_from as name.

I use your ID here and toggle the d-none class OFF if the ID matches the text of the select

$('#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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>