Onchange from select does not click in jquery?

Question

I have an application that has several select nested and use function onchange() for the selected select change the subsequent, but need to select the clicked content, but as already has the function on(change) no js, this second one doesn’t work, my main class is 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 turns out it doesn’t call the function sel(); told me to use EventListener, Is this the way? or do I need to change how to call in select? For the onchange select is subscribing to the archive .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>
<table id="table">
  <thead>
    <tr>
      <th>parcela</th>
      <th>vencimento</th>
      <th>valor</th>
      <th>pago com</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

Your script is working properly. What is happening, is that you are trying to define an event on elements that do not exist yet.

Place:

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);
    }
  });
});

Below:

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++;
}

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;
}
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++;
}

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);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>parcela</th>
      <th>vencimento</th>
      <th>valor</th>
      <th>pago com</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>