select-option

How to show a different display based on the select option chosen

by statsconchris

HTML

<html>
 <head>
  <!-- bootstrap 5.2.3-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
  
 <body>
 
  <div class="container col-6 mt-4">
  <p><b>1. Using JQuery</b></p>
  
      <!-- in style.css or here -->
      <style>
        .option{
          display: none;
        } 
      </style>
      
      <!-- select option using jquery -->
      <div>
       <select class="form-select" id="list">
        <option value="item1" selected>text 1</option>
        <option value="item2">text 2</option>
        <option value="item3">text 3</option>
       </select>
      </div>
      
      <div class="p-2">
        <div id="option-item1" class="option" style="display: block;">
        Result 1 content
       </div>
       <div id="option-item2" class="option" >
        Result 2  content
       </div>
       <div id="option-item3" class="option">
        Result 3  content
       </div>
      </div>
       
  </div>
  
  <!-- select option using javascript -->
  <div class="container col-6 mt-4">
  <p><b>2. Using JavaScript</b></p>   
      <div>
        <select class="form-select" onchange="selectFunction(this)">
          <option value="item1" selected>text 1</option>
          <option value="item2" >text 2</option>
          <option value="item3" >text 3</option>
        </select>
      </div>
      
      <div class="p-2">
        <div id="option-js-item1" class="option-js" style="display: block;">
          Result 1 content
        </div>
        <div id="option-js-item2" class="option-js" style="display: none;">
          Result 2  content
        </div>
        <div id="option-js-item3" class="option-js" style="display: none;">
          Result 3  content
        </div>
      </div>
  </div>
    
  
  <!-- bootstrap 5.2.3 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- jquery 3.6.3-->
  <script...

CSS

.option{
  display: none;
}

JavaScript

// this is a jquery approach
$(document).ready(function() { 
    var $my_list = $( '#list' );
    var $my_option = $( '.option' );
  
    $my_list.on( 'change', function ( e ) {
      $my_option.hide();
      $( '#option-' + this.value ).show(); //option-item1, option-item2, or option-item3
    });
})


// this is a javascript approach
function selectFunction(selected){
      var value = selected.value;
      let option_item = document.getElementsByClassName('option-js')
      for (var i = 0; i < option_item.length; i++ ) {
        option_item[i].style.display = 'none';
      }
      document.getElementById('option-js-'+value).style.display = 'block';
    }