Trying to make Search Bar works with Select Catogory and Subcategory by Name

Question

I'm trying to make a select fillter to search the state of the select country, but when I select the country, nothing happen to state select form.

<script>
    $(document).ready(function() {
        $States = document.getElementsByName('fields[state]');
        $Contries = document.getElementsByName('fields[country]')
        $($States).find('option').hide();
        $($Contries).change(function() {
            var $cat = $(this).find('option:selected');
            console.log($cat);
            var $subCat = $($States).find('option[value^="'+$cat.attr('value')+' "]');
            console.log($subCat);
            $($States).'option:selected').removeAttr('selected');
            $($States).find('option').not('option[value^="'+$cat.attr('value')+' "]').hide();
            $subCat.show();
            $subCat.find('option').first().attr('selected', 'selected');
        });
    });
</script>

<select class="form-control form-search-filter" name="fields[country]" data-action-change="directory.applyFilters">
<option value="">Tanto faz</option>
<option value="United States">Estados Unidos</option>
<option value="Brazil" selected="">Brasil</option>
</select>

<select class="form-control form-search-filter" name="fields[state]" data-action-change="directory.applyFilters">
<option value="" selected="">Tanto faz</option>
<option value="United States 0">(Confidencial)</option>
<option value="United States 1">New York</option>
<option value="United States 2">Washington</option>
<option value="United States 3">Arizona</option>
<option value="Brazil 0">(Confidencial)</option>
<option value="Brazil 1">Rio de Janeiro</option>
<option value="Brazil 2">São Paulo</option>
</select>