Select chained using only HTML and jQuery

Asked

Viewed 783 times

3

Hello, Community!

I have two selects in HTML one with the regions of Brazil and the other with the states. How do I fit them without using a template (PHP, Java, C# etc), only with HTML (the selects) and jQuery?

//select regiao/estado encadeados/dependentes
$('#regiao').on('change', function(){
    var regiao = $(this).val(), estado = $('#uf');
    // filtrar os estados de acordo com a regiao selecionada
});
<!-- select com as regiões do Brasil -->
<select id="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>

javascript jquery html

  • Guys, how do I use the "Execute Code Snippet" function when asking?

2 answers

2


Browsers behave in different ways to interact with select. There’s a known bug in Chrome, and so it will not be possible to do 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 tested it as well:

$('#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 remove, then hide and show what to compare value of select changed with the class in the second select, and then put it all back.

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

jsFiddle: https://jsfiddle.net/mj7z3vpd/

So I was more aggressive and I went 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 each change of the other select, always having the option documents stored in a variable and filtering those that must be added each time.

jsFiddle: https://jsfiddle.net/mj7z3vpd/3/

  • in your example, the last option (in this case, Tocantins) is always loaded even without having the class selected and when the page loads all states are available. There’s some way to fix it?

  • 1

    @Eduardoalmeida works well for me in Chrome but testing on Safari didn’t work (!)... so I changed the code so -> https://jsfiddle.net/mj7z3vpd/3/ works as accurate?

  • 1

    It worked perfectly! Thanks, @Sergio!

1

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 us options instead of change in the select.

Footsteps

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

2. Will erase give one display: none in all the options of select#uf.

3. Will give a display: block to all options with the class corresponding to value of the first select.

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

Working

$('#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>
<!-- select com as regiões do Brasil -->
<select id="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>

  • Guys, how do I use the "Execute Code Snippet" function when asking?

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.