Selects nested in jquery or javascript?

Question

I have a dynamic table with split split split and would like to change the values of selects based by its predecessor, example.

• If you select the first item you would like the subsequent ones to take the same chosen form.
• another example I chose the first as deposit the others would have to be deposit, but if in the second line chose billet the first would remain deposit and only the next ones assumed as billet.

That’s possible?

<table id="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 10</td>
      <td class="align">14/10/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-1"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">2 de 10</td>
      <td class="align">13/11/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-2"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">3 de 10</td>
      <td class="align">13/12/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-3"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">4 de 10</td>
      <td class="align">12/1/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-4"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">5 de 10</td>
      <td class="align">11/2/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-5"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">6 de 10</td>
      <td class="align">13/3/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-6"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">7 de 10</td>
      <td class="align">12/4/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-7"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">8 de 10</td>
      <td class="align">12/5/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-8"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">9 de 10</td>
      <td class="align">11/6/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-9"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">10 de 10</td>
      <td class="align">11/7/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-10"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
  </tbody>
</table>

following table.

Answer 1

You can use a pretty short jQuery for that:

1.    el_select = "#table_com_parcelas select"; // seleciono o id da tabela com a coleção dos selects
2.    $(el_select).on("change",function(){ // evento onchange dos selects
3.      n_valor = $(this).val(); //pego o valor do select alterado
4.      for(x=$(this).index(el_select)+1;x<$(el_select).length;x++){ //faço um loop alterando os selects subsequentes
5.          $(el_select+":eq("+x+")").val(n_valor);
6.      }
7.    });

el_select = "#table_com_parcelas select";
$(el_select).on("change",function(){
	n_valor = $(this).val();
	for(x=$(this).index(el_select)+1;x<$(el_select).length;x++){
		$(el_select+":eq("+x+")").val(n_valor);
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 10</td>
      <td class="align">14/10/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-1"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">2 de 10</td>
      <td class="align">13/11/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-2"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">3 de 10</td>
      <td class="align">13/12/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-3"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">4 de 10</td>
      <td class="align">12/1/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-4"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">5 de 10</td>
      <td class="align">11/2/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-5"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">6 de 10</td>
      <td class="align">13/3/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-6"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">7 de 10</td>
      <td class="align">12/4/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-7"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">8 de 10</td>
      <td class="align">12/5/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-8"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">9 de 10</td>
      <td class="align">11/6/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-9"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">10 de 10</td>
      <td class="align">11/7/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-10"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>

  </tbody>
</table>

Answer 2

If you already use jquery please remove the line that adds the script.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table id="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 10</td>
      <td class="align">14/10/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-1"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">2 de 10</td>
      <td class="align">13/11/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-2"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">3 de 10</td>
      <td class="align">13/12/2017</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-3"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">4 de 10</td>
      <td class="align">12/1/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-4"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">5 de 10</td>
      <td class="align">11/2/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-5"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">6 de 10</td>
      <td class="align">13/3/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-6"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">7 de 10</td>
      <td class="align">12/4/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-7"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">8 de 10</td>
      <td class="align">12/5/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-8"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">9 de 10</td>
      <td class="align">11/6/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-9"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
    <tr>
      <td class="align">10 de 10</td>
      <td class="align">11/7/2018</td>
      <td class="align">R$ 1.000,00</td>
      <td class="align"><select id="select-10"><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select></td>
    </tr>
  </tbody>
</table>

It takes the event change of the select, takes what is its value and its index and from that item it changes the values of the next selects

$(function(){
  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);
        }
     });
  });
});

Remember that this code must be inside the script tag and under jquery.