What is the best way to show/hide a form row if a particular drop down option is selected?

Question

I have a form dropdown list and my goal is to able a user to select "Other" and what I want to happen is to make a form row appear below so the user can type in the "Other" option text. Here is my code below, I'm not sure if Bootstrap naturally has a built in hide/show function. I am using latest version if that helps. Many thanks in advance!

<div class="form-row">
  <div class="form-group col-md-6 offset-md-3 mx-auto">
    <label class="control-label custom_label col-xs-12">Cemetery</label>
    <select type="dropdown" name="cemetery" class="form-control" id="mySelect">
      <option value="select" selected="selected">Select Cemetery</option>
      <option value="AK">Akatarawa</option>
      <option value="TA">Taita</option>
      <option value="WA">Wainuiomata</option>
      <option value="WH">Whenua Tapu</option>
      <option value="MA">Makara</option>
      <option value="KA">Karori</option>
      <option value="ST">St Johns</option>
      <option value="AW">Awa Tapu</option>
      <option value="PA">Paraparaumu</option>
      <option value="other">Other</option>
    </select>
  </div>
</div>

The form row below I want to appear when above "other" option is selected and of course disappear when another dropdown option is selected.

<div class="form-row">
  <div class="form-group col-md-6 offset-md-3 mx-auto">
    <input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
  </div>
</div>

Answer 1

We can make use of bootstrap util class "d-block" and "d-none" to show/hide the containers.

   function handleSelect() {
       var selected = document.getElementById("mySelect").value;
       var details = document.getElementById("other-details");
       if (selected === "other") {
         details.classList.remove("d-none");
         details.classList.add("d-block");
      } else {
         details.classList.remove("d-block");
         details.classList.add("d-none");
      }
    }

Working demo

Answer 2

I have added both a JQuery option and a vanilla JS option. Both I also added an ID to the option tag with the value of "other". Simply added an id="other" attribute to that tag.

Using JQuery you can use .show() and .hide() to show/hide the input when the other option is selected.

 var other = $("#other"); var otherInput = $(".otherInput"); otherInput.hide(); $('#mySelect').on('change', function() { var value = $(this).val(); if(value === "other"){ otherInput.show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row"> <div class="form-group col-md-6 offset-md-3 mx-auto"> <label class="control-label custom_label col-xs-12">Cemetery</label> <select type="dropdown" name="cemetery" class="form-control" id="mySelect"> <option value="select" selected="selected">Select Cemetery</option> <option value=" AK">Akatarawa</option> <option value="TA">Taita</option> <option value="WA">Wainuiomata</option> <option value="WH">Whenua Tapu</option> <option value="MA">Makara</option> <option value="KA">Karori</option> <option value="ST">St Johns</option> <option value="AW">Awa Tapu</option> <option value="PA">Paraparaumu</option> <option id="other" value="other">Other</option> </select> </div> </div> <div class="form-row otherInput"> <div class="form-group col-md-6 offset-md-3 mx-auto"> <input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery"> </div> </div>

Vanilla JS: First set your other input div to hidden using js .style . Then create a onload function and add an event listener for change. Run a conditional on the value and change the style if the conditional is true.

 otherInput.style.display = "none"; window.onload = function () { var selectBox = document.getElementById("mySelect"); selectBox.addEventListener('change', changeFunc); function changeFunc() { if(this.value === "other"){ otherInput.style.display = "block"; }else{ otherInput.style.display = "none"; } } }

 <div class="form-row"> <div class="form-group col-md-6 offset-md-3 mx-auto"> <label class="control-label custom_label col-xs-12">Cemetery</label> <select type="dropdown" name="cemetery" class="form-control" id="mySelect"> <option value="select" selected="selected">Select Cemetery</option> <option value=" AK">Akatarawa</option> <option value="TA">Taita</option> <option value="WA">Wainuiomata</option> <option value="WH">Whenua Tapu</option> <option value="MA">Makara</option> <option value="KA">Karori</option> <option value="ST">St Johns</option> <option value="AW">Awa Tapu</option> <option value="PA">Paraparaumu</option> <option id="other" value="other">Other</option> </select> </div> </div> <div id="otherInput" class="form-row"> <div class="form-group col-md-6 offset-md-3 mx-auto"> <input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery"> </div> </div>