Problems with Onchange in select?

Asked

Viewed 317 times

1

I have an event of the button that triggers an ajax that loads the data as an example.

$('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + mascaraValor(valor.toFixed(2)) + '</td><td class="align"><select id="select-' + x + '" onchange="('+this.id+')>"' + insere_option() + '</select></td></tr>');

ajax loads from 1 to 12 selects, depends on the number of installments chosen, however the event onchange="('+this.id+')" tick the id of the button and not the select in question.

there is some way to insert the onchange() after all the selects have been filled? or have another way to select the select that was clicked

below functions used;

while (x <= parcelas) {
        data_sun += 30;
        var vencimento = adicionarDiasData(data_sun, data);
        var valor = total / parcelas;
        $('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + mascaraValor(valor.toFixed(2)) + '</td><td class="align"><select id="select-' + x + '">' + insere_option() + '</select></td></tr>');
        x++;
    }//carrega os selects
type_of_payment();//chama a função que seta os outros selects. Aqui o onchange está funcionando.

Carraga options;

function insere_option() {
    var options = "";
    options += "<option value=''>Selecione</option>";
    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;
}

As all are nested I have another function that arrow the subsequent options with the same selected item.

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

2 answers

1


Dude from what I understand the problem is that the this you are putting is referring to a different scope in case the function of the button event, change of onchange="funcao('+this.id+')" for onchange="funcao(this.id)".

In your code

  1. I set some static values so I could simulate;
  2. I removed the unknown functions;
  3. I added:

onchange="test(this.id)"

function teste(that){
   console.log(that);
}


var x = 1;//para teste
var parcelas = 10;//para teste

while (x <= parcelas) {
  var vencimento = '2017-09-15'; //para teste
  var valor = 100; //para teste
        $('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + valor.toFixed(2) + '</td><td class="align"><select onchange="teste(this)" id="select-' + x + '">' + insere_option() + '</select></td></tr>');
        x++;
    }//carrega os selects
type_of_payment();

function teste(that){
  alert(that.value);
}

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

function insere_option() {
    var options = "";
    options += "<option value=''>Selecione</option>";
    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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_com_parcelas">
<tbody></tbody>
</table>

  • i had done so you mentioned but the on("change",...) of the type_of_payment() function fails to work.

  • Can you explain to me what the type_of_payment function should do?

  • Example, the user selects the first select with an option of the form of payment and the function arrow the other selects with the same form of payment, if it is done in 5 installments and the first is selects in card he arrow the rest as card too.

  • By the code of your function it will set everything that has a higher index than changed, run my example and see how it behaves. if you want the change to affect all just replace if (index > Indice) { $(this). val(value); } per $(this). val(value);

  • yes exactly this it should change only the larger indices, and this is correct and in your example it is also correct, but wanted to create an Alert stating the value that was selected, and this function the onchange is not calling

  • Guy put the Alert with the selected value..

  • Let’s go continue this discussion in chat.

Show 2 more comments

0

The problem has been solved by inserting 

<script>
function func(id) {
    alert(id);
}
</script>

In the content display page, the same was not being recognized in main.js after the ajax popular the selects.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.