Selects nested in jquery or javascript?

2

I have a PivotTable with parcel split and would like to change the values of selects based on their predecessor, eg.

  • Ifyouselectthefirstitemyouwouldlikethesubsequentitemstoassumethesamechosenshape.
  • AnotherexampleIchosethefirstoneasadeposit,theotherwouldhavetobeadeposit,butifthesecondlinewastochooseaboleto,thefirstonewouldremainadepositandonlythenextoneswouldbecalledaboleto.

Isthispossible?

<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>

follows table.

    
asked by anonymous 13.09.2017 / 20:32

2 answers

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><tableid="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 change event of the select, takes 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 should be inside the script tag and under jquery.

    
13.09.2017 / 21:16
3

You can use a fairly short jQuery for this:

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><tableid="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>
    
13.09.2017 / 21:51