based on select val change content

based on select box value change show hide elements

by MD Hasan Patwary

HTML

<select id="selectBox">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<div id="div1">
  This is Div 1.
</div>

<div id="div2" class="hidden">
  This is Div 2.
</div>

CSS

.hidden {
    display: none;
  }

JavaScript

$(document).ready(function() {
    $("#selectBox").change(function() {
      var selectedOption = $(this).val();
      if (selectedOption === "option1") {
        $("#div1").removeClass("hidden");
        $("#div2").addClass("hidden");
      } else if (selectedOption === "option2") {
        $("#div1").addClass("hidden");
        $("#div2").removeClass("hidden");
      }
    });
  });