Estoy tratando de ocultar algunas opciones cuando selecciono un país diferente. Estas opciones son los estados de este país. Pero, cuando selecciono el país, no muestra nada en la subcategoría.
<script> $('#profile-state').find('option').hide(); $('#profile-country').change(function() { var $cat = $(this).find('option:selected'); var $subCat = $('#profile-state').find('.' + $cat.attr('value')); $('#profile-state').find('option').not("'"+ '.' + $cat.attr('value') + "'").hide(); $subCat.show(); $subCat.find('option').first().attr('selected', 'selected'); }); </script> <div class="form-group field-profile-country required"> <label class="control-label" for="profile-country">País</label> <select id="profile-country1" class="form-control" name="Profile[country]" aria-required="true"> <option value="">Selecione:</option> <option value="United States">Estados Unidos</option> <option value="Brazil">Brasil</option> </select> </div> <div class="form-group field-profile-state required"> <label class="control-label" for="profile-state">Estado</label> <select id="profile-statew" class="form-control" name="Profile[state]" aria-required="true"> <option value="">Selecione:</option> <option value="Dont Say">Dont Say</option> <option value="Unidade States 1">New Work</option> <option value="Unidade States 2">Washington</option> <option value="Brazil 1">Rio de Janeiro</option> <option value="Brazil 2">São Paulo</option> </select> </div>Entonces, trato de hacer diferentes valores usando números, porque no puedo usar los mismos valores en mi aplicación. ¿Puede ayudarme alguien?
Hay algunos errores tipográficos en su código, como la ortografía incorrecta de estados unidos en el menú desplegable de subcategorías, etc. Cambié su secuencia de comandos para seleccionar solo las opciones de subcategorías que comienzan con el nombre del país seleccionado usando (^).
$(document).ready(function() { $('#profile-state').find('option').hide(); $('#profile-country').change(function() { var $cat = $(this).find('option:selected'); console.log($cat); var $subCat = $("#profile-state").find('option[value^="'+$cat.attr('value')+' "]'); console.log($subCat); $('#profile-state option:selected').removeAttr('selected'); $('#profile-state').find('option').not('option[value^="'+$cat.attr('value')+' "]').hide(); $subCat.show(); $subCat.find('option').first().attr('selected', 'selected'); }); }); <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div class="form-group field-profile-country required"> <label class="control-label" for="profile-country">País</label> <select id="profile-country" class="form-control" name="Profile[country]" aria-required="true"> <option value="">Selecione:</option> <option value="United States">Estados Unidos</option> <option value="Brazil">Brasil</option> </select> </div> <div class="form-group field-profile-state required"> <label class="control-label" for="profile-state">Estado</label> <select id="profile-state" class="form-control" name="Profile[state]" aria-required="true"> <option value="">Selecione:</option> <option value="Dont Say">Dont Say</option> <option value="United States 1">New Work</option> <option value="United States 2">Washington</option> <option value="Brazil 1">Rio de Janeiro</option> <option value="Brazil 2">São Paulo</option> </select> </div>La respuesta de T.Shah funciona según sea necesario. Pero también podrías hacerlo con menos esfuerzo así:
$(document).ready(function() { const $cntr=$('#profile-country').change(function() { $("#profile-state option").each(function(){$(this).toggle(this.value.slice(0,5)==$cntr.val().slice(0,5)) }); }); }); <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div class="form-group field-profile-country required"> <label class="control-label" for="profile-country">País</label> <select id="profile-country" class="form-control" name="Profile[country]" aria-required="true"> <option value="">Selecione:</option> <option value="United States">Estados Unidos</option> <option value="Brazil">Brasil</option> </select> </div> <div class="form-group field-profile-state required"> <label class="control-label" for="profile-state">Estado</label> <select id="profile-state" class="form-control" name="Profile[state]" aria-required="true"> <option value="">Selecione:</option> <option value="Dont Say">Dont Say</option> <option value="United States 1">New Work</option> <option value="United States 2">Washington</option> <option value="Brazil 1">Rio de Janeiro</option> <option value="Brazil 2">São Paulo</option> </select> </div>