Problems with OnChange in select?

Question

Problems with OnChange in select?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a button event 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, it depends on the number of parcels chosen, however the event onchange="('+this.id+')" carries the button id and not the select in question.

Is there any way to enter onchange() after all the selects have been filled in? 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;
}

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

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

asked by anonymous 15.09.2017 / 16:14

2 answers

0

The problem was solved by inserting

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

On the content view page, it was not being recognized in main.js after ajax of the selects.

15.09.2017 / 19:21

Redirecting requests with .htaccess How to register date of birth in bd? [closed]

score 1 · Accepted Answer

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

In your code

I put some static values to be able to simulate;

Removed unknown functions;

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><tableid="table_com_parcelas">
<tbody></tbody>
</table>