JSFiddle - React, Tailwind, and code Playground

by itsazzad

HTML

<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>

<p><input type="text" name="state_field" value="" id="state"></p>

JavaScript

$( "select#countries" )
  .change(function () {
      if($("select#countries option:selected").attr("value")=="3"){
          $("select#countries").hide();
          $("#state").show();
          $("#state").val($("select#countries option:selected").text());
      }else{
          $("#state").hide();
          $("select#countries").show();
          $("#state").val("");
      }
});
$( "#state" )
  .change(function () {
      if($("#state").val()==""){
          $("#state").hide();
          $("select#countries").show();
      }else{
      }
});