'Change options when I select a category using Javascript (Country/State)

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?

javascriptphphtml


Solution 1:[1]

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>

Solution 2:[2]

T.Shah's answer works as required. But you could do it with less effort like this too:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Carsten Massmann
Solution 2 Carsten Massmann

Related Questions