0

Eu tenho uma aplicação que possui vários select aninhados e uso a função onchange() para o select selecionado alterar o subsequente, mas preciso selecionar o conteúdo clicado, mas como já possui a função on(change) no js, este segundo não funciona, a minha classe principal está assim:

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.

e no select inseri o seguinte código,

<select id="select-1" onchange="sel(this.value)">/*options*/</select>

mas acontece que ele não chama a função sel(); me falaram para usar EventListener, o caminho é este mesmo? ou preciso alterar a forma de chamar no select? Pois o onchange do select está subscrevendo o do arquivo .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>

1 Resposta 1

1

Seu script está funcionando corretamente. O que está acontecendo, é que você está tentando definir um evento em elementos que não existem ainda.

Coloque:

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

Abaixo de:

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>

1
  • Não sabia que precisaria ter está ordem, aprendi mais uma hoje, muito obrigado @WéllingthonM.deSousa
    – WMomesso
    15/09/2017 às 2:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .