Show/Hide different forms based on a option selected

Question

I would like to know how to show/hide different forms based one form\'s selection.

In the sample code below all three forms are automatically set to display:none. I woul

Answer 1

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000ff;
}

  
  

  



  

    
      Choose Color
      Red
      Green
      Blue
    
  
  
You have selected red option so i am here
  
You have selected green option so i am here
  
You have selected blue option so i am here