0

Estou desenvolvendo um código para renovar as matriculas de alunos, nessa página o primeiro select o usuário irá selecionar se o aluno irá para a próxima turma ou ira permanecer na mesma. Fiz o loop em php e está carregando todos os alunos:

inserir a descrição da imagem aqui

Consegui popular os selects, porém, somente funciona do primeiro aluno, os demais. Andei pesquisando e acredito que eu deva criar elemento parent and child no meu javascript porém tentei de tudo e não consegui.

Segui o código do primeiro select da imagem:

<select 
  class="form-control selectboxit" 
  name="promotion_status_<?php echo $row['student_id'];?>" style="width: 40px;" id="select1">
  <option value="vazio">Selecione uma opção</option>
  <option value="<?php echo $class_id_to;?>">
  <?php echo 'Renovar para' ." - ". $this->crud_model->get_class_name($class_id_to); ?>
  </option>
  <option value="<?php echo $class_id_from; ?>" >
  <?php echo 'Permanecer no' ." - ". $this->crud_model->get_class_name($class_id_from); ?>
 </select>

Segui o código do segundo select da imagem:

<select id="select2">
 <option value="">selecione</option>
</select>

Código em javascript:

$("#select1").change(function() {
    var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
    var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

    var valor = $(this).val();

    if (valor == "vazio") {
        $("#select2").html("");
        {
            $("#select2").append("<option value='test'> Selecione </option>");
        }

    }else if (valor == "<?php echo $class_id_to;?>") {
        $("#select2").html("");

        for(var i = 0; i < proxima_turma.length; ++i) {
            $("#select2").append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
        }


    } else if (valor == "<?php echo $class_id_from; ?>") {

        $("#select2").html("");

        for(var i = 0; i < antiga_turma.length; ++i) {
            $("#select2").append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
        }
    }
});

});

Como definir elementos parent e child?

Como está a tabela com os selects atualmente:

<tr>
 <td align="left">
    <?php
     if((!is_null($transferidos) && (!is_null($evadidos)))){
      echo $name . ' - ' .'<b></b>Não pertencente a unidade de ensino';
         }elseif((!is_null($transferidos) || (!is_null($evadidos)))){
         echo $name . ' - ' .'<strong>Não pertencente a unidade de 
 ensino</strong>';
  }else{
 echo $name;
 }
 ?>
 </td>
 <td align="center">
 <?php if($row['section_id'] != '' && $row['section_id'] != 0)
 echo $this->db->get_where('section' , array('section_id' => 
 $row['section_id']))->row()->name;
  ?>
 </td>
 <td>
 <?php if($query->num_rows() < 1):?>
  <select class="select1"   name="promotion_status_<?php echo 
  $row['student_id'];?>" >
  <option value="vazio">Selecione uma opção</option>
  <option value="<?php echo $class_id_to;?>">
  <?php echo 'Renovar para' ." - ". $this->crud_model- 
 >get_class_name($class_id_to); ?>
</option>
<option value="<?php echo $class_id_from; ?>" >
<?php echo 'Permanecer no' ." - ". $this->crud_model- 
>get_class_name($class_id_from); ?>
</select>
 <?php endif; ?>
 <?php if($query->num_rows() > 0): ?>
 <button class="btn btn-success">
 <i class="entypo-check"></i> Matricula já foi renovada
 </button>
 <?php endif;?>
 </td>
 <td>
     <?php if($query->num_rows() < 1):?>
     <select class="select2" name="promotion_status2_<?php 
    echo $row['student_id'];?>">
     <option value="">selecione</option>
         </select>
     <?php endif;?>
     <?php if($query->num_rows() > 0):?>
     <button class="btn btn-success">
     <i class="entypo-check"></i> Matricula já foi renovada
     </button>
     <?php endif;?>
     </td>
     </tr>
4
  • Você esta colocando #select1 e #select2 para todos os selects ou criou ids individuais para cada um? Commented 10/03/2020 às 10:45
  • Não pode repetir id's. Só vai pegar o primeiro.
    – Sam
    Commented 10/03/2020 às 12:01
  • Thiago Costa - Individuais para cada um. Commented 10/03/2020 às 12:44
  • Sam - Como pegar o primeiro para todo o loop? Commented 10/03/2020 às 12:45

1 Resposta 1

1

Não pode repetir id's na mesma página, pois irá pegar apenas o primeiro que encontrar.

Use class em vez de id. Basta alterar id="select1" e id="select2" para class="form-control selectboxit select1" e class="select2" nos selects da lista.

Em seguida você irá alterar o .select2 que está na mesma linha do .select1 quando disparar o change:

$(".select1").change(function() {
    var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
    var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

    var valor = $(this).val();
    var select2 = $(this).closest("tr").find(".select2"); // busca o select2 da mesma linha

    if (valor == "vazio") {
        select2
        .html("")
        .append("<option value='test'> Selecione </option>");

    }else if (valor == "<?php echo $class_id_to;?>") {
        select2.html("");

        for(var i = 0; i < proxima_turma.length; ++i) {
            select2.append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
        }


    } else if (valor == "<?php echo $class_id_from; ?>") {

        select2.html("");

        for(var i = 0; i < antiga_turma.length; ++i) {
            select2.append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
        }
    }
});
6
  • Sam quase funcionou, falhar minha. Se eu coloco:<select class="select2" name="promotion_status2_<?php echo $row['student_id'];?>"> <option value="">selecione</option> </select> Não aparece o segundo select, fica oculto, mas se retiro a classe ele aparece mas não acontence nada. Commented 10/03/2020 às 14:46
  • Se o segundo select já tiver alguma classe, basta vc adicionar a classe select2, tipo: class="outras_classes_que_já_tem select2"
    – Sam
    Commented 10/03/2020 às 14:51
  • Não, Vou editar a pergunta e no final colocar a tabela toda como está atualmente. Commented 10/03/2020 às 14:53
  • Não retire as outras classes do primeiro select. Deveria ficar assim: class="form-control selectboxit select1"
    – Sam
    Commented 10/03/2020 às 14:59
  • Boa sorte aí. QQ coisa é só chamar.
    – Sam
    Commented 10/03/2020 às 16:22

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 .