Select chained using only HTML and jQuery

Browsers behave in different ways to interact with select . There is a known bug in Chrome , so it will not work just like this:

$('#regiao').on('change', function() {
    var classe = this.value;
   $('#uf option').each(function() {
        var opt = $(this);
        if (opt.hasClass(classe)) opt.show();
        else opt.hide();
    });
});

I also tested this way:

$('#regiao').on('change', function() {
    var classe = this.value;
    var options = $('#uf option').remove();
    options.each(function() {
        var opt = $(this);
        if (opt.hasClass(classe)) opt.show();
        else opt.hide();
    });
    $('#uf').append(options);
});

That removes and restores the options of select to force you to react. First it removes, then hides and shows what it should compare value of select changed with class in second select , and then resets everything.

But this solution does not work in Safari 9 ...

jsFiddle: link

So I was more aggressive and did like this:

var options = $('#uf option');
var uf = $('#uf').empty();
$('#regiao').on('change', function() {
    var classe = this.value;
    var opts = options.filter(function() {
        return $(this).hasClass(classe)
    });
    uf.html('').append(opts);
});

emptying the select to each change of the other select , always having the option originals stored in a variable and filtering the ones that must be added each time.

jsFiddle: link

Just do this:

$('#regiao option').on('click', function(){
    var value = $( "#regiao option:selected").val();
    $('#uf option').css('display', 'none');
    $('.' + value).css('display', 'block');
    $('#uf').val($('.' + value).eq(0).val())
})

I opted for the event click on options instead of change on select .

Steps

1. It will capture the value of the selected option in the first select .

2. It will delete giving display: none in all options of select#uf .

3. It will give display: block to all options with class corresponding to value of first select .

4. The value of select#uf will be the value of the first option with the corresponding class.

Running

$('#regiao option').on('click', function(){
  var value = $( "#regiao option:selected").val();
    $('#uf option').css('display', 'none');
    $('.' + value).css('display', 'block');
    $('#uf').val($('.' + value).eq(0).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--selectcomasregiõesdoBrasil--><selectid="regiao" name="regiao">
    <option value="CO">Centro-oeste</option>
    <option value="NE">Nordeste</option>
    <option value="N">Norte</option>
    <option value="SE">Sudeste</option>
    <option value="S">Sul</option>
</select>

<!-- select com os estados do Brasil -->
<select id="uf" name="uf">
    <option value="AC" class="N">Acre</option>
    <option value="AL" class="NE">Alagoas</option>
    <option value="AP" class="N">Amapá</option>
    <option value="AM" class="N">Amazonas</option>
    <option value="BA" class="NE">Bahia</option>
    <option value="CE" class="NE">Ceará</option>
    <option value="DF" class="CO">Distrito Federal</option>
    <option value="ES" class="SE">Espírito Santo</option>
    <option value="GO" class="CO">Goiás</option>
    <option value="MA" class="NE">Maranhão</option>
    <option value="MS" class="CO">Mato Grosso do Sul</option>
    <option value="MT" class="CO">Mato Grosso</option>
    <option value="MG" class="SE">Minas Gerais</option>
    <option value="PA" class="N">Pará</option>
    <option value="PB" class="NE">Paraíba</option>
    <option value="PR" class="S">Paraná</option>
    <option value="PE" class="NE">Pernambuco</option>
    <option value="PI" class="NE">Piauí</option>
    <option value="RJ" class="SE">Rio de Janeiro</option>
    <option value="RN" class="NE">Rio Grande do Norte</option>
    <option value="RS" class="S">Rio Grande do Sul</option>
    <option value="RO" class="N">Rondônia</option>
    <option value="RR" class="N">Roraima</option>
    <option value="SC" class="S">Santa Catarina</option>
    <option value="SP" class="SE">São Paulo</option>
    <option value="SE" class="NE">Sergipe</option>
    <option value="TO" class="N">Tocantins</option>
</select>