I have an application that has several nested select and I use the onchange() function for the selected select change the subsequent one, but I need to select the clicked content, but since it already has the on(change) function in js, this second does not work , my main class looks like this:
var selects = $("#table_com_parcelas select");
var index = null;
var valor = null;
selects.on('change', function () {
var valor = this.value;
indice = selects.index(this);
selects.each(function (index) {
if (index > indice) {
$(this).val(valor);
}
});
}); //pega o valor selecionado do select e seta os subsequentes com o mesmo valor.
and in select insert the following code,
<select id="select-1" onchange="sel(this.value)">/*options*/</select>
But it happens that it does not call the function sel(); I was told to use EventListener , the path is this same? or do I need to change how to call in select?
Because onchange of select is subscribing to .js
var parcelas = 3;
var x = 1;
function insere_option() {
var options = "";
options += "<option value='1'>Boleto</option>";
options += "<option value='2'>Cartão</option>";
options += "<option value='3'>Cheque</option>";
options += "<option value='4'>Dinheiro</option>";
options += "<option value='5'>Transferência</option>";
return options;
}
var selects = $("#table select");
var index = null;
var valor = null;
selects.on('change', function() {
var valor = this.value;
indice = selects.index(this);
selects.each(function(index) {
if (index > indice) {
$(this).val(valor);
}
});
});
function boletos(id){
console.log(id);
}
while (x <= parcelas) {
$('#table tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">01/' + x + '/2017</td><td class="align">R$ 100,00</td><td class="align"><select id="select-' + x + '" onchange="boletos(this.id)">' + insere_option() + '</select></td></tr>');
x++;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="table">
<thead>
<tr>
<th>parcela</th>
<th>vencimento</th>
<th>valor</th>
<th>pago com</th>
</tr>
</thead>
<tbody>
</tbody>
</table>