Estoy tratando de hacer un filtro de selección para buscar el estado del país seleccionado, pero cuando selecciono el país, no sucede nada con el formulario de selección de estado.

 <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>