Boa tarde.
Preciso colocar em meu formulário dois select, sendo que o segundo tem que apresentar valores conforme a escolha do primeiro.
No exemplo que me indicaram, adaptei conforme o código abaixo, porém sempre que executo o código ele pega o último valor. Queria que ao selecionar por exemplo Visa , aparecesse 1 (primeira parcela), se eu selecionar Master, que também aparecesse a parcela 1. Não entendi onde estou errando, pois está sempre selecionando a última parcela.
Poderiam me dar uma ajuda nisso?
Grata
var parcelas = $('select[name="Parcela"] option');
$('select[name="Bandeira"]').on('change', function () {
var Bandeira = this.value;
var novoSelect = parcelas.filter(function () {
return $(this).data('bandeira') == Bandeira;
});
$('select[name="Parcela"]').html(novoSelect);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col-md-3">
<select class="form-control" id="cartaoBandeira" name="Bandeira" required>
<option value="">Selecione o Cartão...</option>
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
</select>
<div class="row">
<div class="form-group col-md-3">
<select class="form-control" id="cartaoParcela" name="Parcela" required>
<option data-bandeira="" value="">...</option>
<option data-bandeira="Visa" value="1">1</option>
<option data-bandeira="Visa" value="2">2</option>
<option data-bandeira="Visa" value="3">3</option>
<option data-bandeira="MasterCard" value="1">1</option>
<option data-bandeira="MasterCard" value="2">2</option>
<option data-bandeira="MasterCard" value="3">3</option>
<option data-bandeira="MasterCard" value="4">4</option>
<option data-bandeira="MasterCard" value="5">5</option>
</select>
change
no primeiro select e depois carregar o outro.$('#cartaoBandeira').change(function () { // carregar dados em cartaoParcela });