JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="province">
  <option value="1">RM</option>
  <option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
  <option data-province="DEF">SELECT CITY</option>
  <option data-province="RM" value="1">ROMA</option>
  <option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
  <option data-province="FI" value="3">FIRENZE</option>
  <option data-province="FI" value="4">PONTASSIEVE</option>
</select>    
<span id="option-container" style="visibility: hidden; position:absolute;"></span>

JavaScript

$('#province').on('change', function() {
    var province = $("#province").find('option:selected').text();     
    $("#city option[data-province!='" + province + "']").hide();
    $("#city option[data-province='" + province + "']").show();
    $("#city option[data-province='DEF'").show().prop('selected', true);
    $("#city").removeAttr("disabled");
});