JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ffflabs.com/sandbox/jqueryui/jquery-ui-1.8.22.custom.css">
<script src="http://ffflabs.com/sandbox/chained_combobox.js"></script>
 <div id="datafields"  >
  <fieldset>
<label for="country">Country</label>
<select id="country">
<option value='1'   id='1'  >Alemania</option>
<option value='2'   id='2'  >Angola</option>
<option value='3'   id='3'  >Arabia Saudita</option>
<option value='4'   id='4'  >Argelia</option>
<option value='5'   id='5'  >Argentina</option>
<option value='6'   id='6'  >Australia</option>
<option value='7'   id='7'  >Bangladés</option>
<option value='8'   id='8'  >Benín</option>
<option value='9'   id='9'  >Birmania</option>
<option value='10'   id='10'  >Bolivia</option>
<option value='11'   id='11'  >Brasil</option>
<option value='12'   id='12'  >Burkina Faso</option>
<option value='13'   id='13'  >Camerún</option>
<option value='14'   id='14'  >Canadá</option>
<option value='15'   id='15'  >Chad</option>
<option value='16'   id='16'  >Chile</option>
<option value='17'   id='17'  >China</option>
<option value='18'   id='18'  >Colombia</option>
<option value='19'   id='19'  >Corea del Sur</option>
<option value='20'   id='20'  >Costa de Marfil</option>
<option value='21'   id='21'  >Costa Rica</option>
<option value='22'   id='22'  >Cuba</option>
<option value='23'   id='23'  >Ecuador</option>
<option value='24'   id='24'  >Egipto</option>
<option value='25'   id='25'  >El Salvador</option>
<option value='26'   id='26'  >España</option>
<option value='27'   id='27'  >Estados Unidos</option>
<option value='28'   id='28'  >Etiopía</option>
<option value='29'   id='29'  >Filipinas</option>
<option value='30'   id='30'  >Francia</option>
<option value='31'   id='31'  >Ghana</option>
<option value='32'   id='32'  >Grecia</option>
<option value='33'   id='33'  >Guatemala</option>
<option value='34'   id='34'  >Guinea</option>
<option value='35'   id='35'  >Haití</option>
<option value='36'   id='36' ...

CSS

#datafields {width:500px;}
 fieldset {margin:10px;}
 label {width:80px;display:inline-block;}
     .ui-combobox {
        position: relative;
        display: inline-block;
    }
    .ui-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        /* adjust styles for IE 6/7 */
        *height: 1.7em;
        *top: 0.1em;
    }
    .ui-combobox-input {
        margin: 0;
        padding: 0.25em;
    }
    .ui-autocomplete-input {
    width:280px;
    }
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
/* IE 6 doesn't support max-height  we use height instead     */
    * html .ui-autocomplete {
        height: 200px;
    }
    

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.ui-widget {font-size:1em !important;}

JavaScript

jQuery(document).ready(function() {       
       


 jQuery('#country').combobox({
            selected: function(event, ui) {    
                var cityApto=jQuery('#city .'+ui.item.option.id).eq(0).val();
                jQuery('#city').val(cityApto);
                jQuery('#input_city').val(jQuery('#city option:selected').text());
                var Widget=jQuery('#input_city').combobox("widget").find('li');
                Widget.each(function() {
                    if(jQuery(this).hasClass(ui.item.option.id)) {
                        jQuery(this).show();
                    } else {
                        jQuery(this).hide();
                    }
                });
            }
        });
        
        jQuery('#city').combobox({
            selected: function(event, ui) {    
                console.log(ui.item.option.value);
                jQuery('#country').val(ui.item.option.className);
                jQuery('#input_country').val(jQuery('#country option:selected').text());
                jQuery('#city').attr({'class':ui.item.option.className});
            }
        });
    });