2

Estou aplicando um dropdown dinamicamente para cada item de uma lista retornada em PHP. Ao selecionar algum dos itens do dropdown, este valor é enviado a um arquivo Update.php, através de JQuery e Ajax.

O Dropdown:

//Aqui tenho um while em PHP para criar um Dropdown para cada registro no Banco de dados
<select id="tipoSel">
   <option value="">Selecione o tipo:</option>
   <option value="Cívil">Cívil</option>
   <option value="Criminal">Criminal</option>
   <option value="Trabalhista">Trabalhista</option>
   <option value="Família">Família</option>
   <option value="Comercial">Comercial</option>
   <option value="Administrativo">Administrativo</option>
 </select>
 <input type="hidden" name="id" value="<?php echo $p->current()->id;?>" />

O JQuery:

$(document).ready(function(){
        $(function() {
            $("#tipoSel").bind("change", function(event) {
                var $this = $( this );

                var tipo = $this.val();
                var id = $this.next('input').val();

                $.ajax({
                    type: "POST", 
                    url: "Update.php",
                    data: 'tipo='+tipo+'&id='+id,
                    success: function(data) {
                        alert(tipo+' : '+id);
                    }
                });
            });

        });
    });

Porém, apesar de ter vários registros, e todos estarem exibindo seu respectivo Dropdown, a função do JQuery só funciona para o primeiro registro da página! Os demais nem exibem o alert...

O que deve estar errado? Como solucionar?

1 Resposta 1

4

São todos os Dropdowns criados com o id de tipoSel? O id de um elemento deve ser único no DOM enteiro.

usaria uma classe, criando um Dropdown assim:

<select class="tipoSel">
   <option value="">Selecione o tipo:</option>
   <option value="Cívil">Cívil</option>
   <option value="Criminal">Criminal</option>
   <option value="Trabalhista">Trabalhista</option>
   <option value="Família">Família</option>
   <option value="Comercial">Comercial</option>
   <option value="Administrativo">Administrativo</option>
 </select>
 <input type="hidden" name="id" value="<?php echo $p->current()->id;?>" />

E depois no seu jQuery, selecione-as assim:

$('.tipoSel').on( ... );
2
  • É exatamente isso! Nem havia prestado atenção... Valeu!
    – Atoyansk
    Commented 18/07/2015 às 23:13
  • Que bom que deu certo :D Commented 18/07/2015 às 23:15

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 .