JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<select class="cat-code" id="cat-code">
  <option ></option>
  <option value="1">ROJO</option>
  <option value="2">AZUL</option>
  <option value="3">MOSTRAR TODO</option>
  <option value="4">OCULTAR TODO</option>
</select>


<div class="div1">hidfdfdfdfdf</div>
<div class="div2">hellofdfdfdfdfdfdfdf</div>

CSS

.div1 {color: red; display:none}
.div2 {color: blue; display:none}

.vertical {
  transform: rotate(-90deg);
	transform-origin: left top 0;
}

JavaScript

$("#cat-code").change(function(){
  var value = this.value;
  if (value == "1"){
    $(".div1").show();
    $(".div2").hide();
  }
});

$("#cat-code").change(function(){
  var value = this.value;
  if (value == "2"){
    $(".div2").show();
    $(".div1").hide();
  }
});
$("#cat-code").change(function(){
  var value = this.value;
  if (value == "3"){
    $(".div2, .div1").show();
    $("").hide();
  }
});
$("#cat-code").change(function(){
  var value = this.value;
  if (value == "4"){
    $("").show();
    $(".div2, .div1").hide();
  }
});