JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  
  </head>
  <body>
  
    <select id="mySelect" onChange="myFx()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    
    <div id="hello1" class="">Hello 1</div>
    <div id="hello2" class="hide">Hello 2</div>
    <div id="hello3" class="hide">Hello 3</div>
  </body>
</html>

JavaScript

myFx = function(){
  if($("#mySelect").val() == 1){
  	$("#hello1").removeClass("hide");
    $("#hello2").addClass("hide");
    $("#hello3").addClass("hide");
  } else if($("#mySelect").val() == 2){
  	$("#hello2").removeClass("hide");
    $("#hello1").addClass("hide");
    $("#hello3").addClass("hide");
  } else if($("#mySelect").val() == 3){
  	$("#hello3").removeClass("hide");
    $("#hello1").addClass("hide");
    $("#hello2").addClass("hide");
  }
}