Im trying to hide some options when I select a different country. These options are the states of this country. But, when I select the country, it doesnt showing nothing in the subcategory.
<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>
So, I try make differents values using numbers, coz I cant use the same values in my application. Someone can help me?
Advertisement
Answer
There are a few typos in your code, like wrong spelling of united states in the subcategory dropdown etc. I have changed your script to select only those subcategory options that begin with the name of the selected country by using(^).
$(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>