Dynamic SELECT with second load error

Question

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
     <!-- DATA PROVA -->
    <script type="text/javascript">
        $(document).ready(function(){
            $().ajaxStart(function() { 
                    $('.carregando').show(); 
                    $('#dataprova').hide();
            });

            $().ajaxStop(function() { 
                $('.carregando').hide(); 
                $('#dataprova').show();
            });

            $('#laboratorio').change(function(){                                    
                $('#dataprova').load('subcategorias.php?laboratorio='+$('#laboratorio').val() );
            });
        });
    </script>
    <!-- HORA PROVA -->
    <script type="text/javascript">
        $(document).ready(function(){
            $().ajaxStart(function() { 
                    $('.carregando').show(); 
                    $('#horaprova').hide();
            });

            $().ajaxStop(function() { 
                $('.carregando').hide(); 
                $('#horaprova').show();
            });

            $('#dataprova').change(function(){                                  
                $('#horaprova').load('subcategorias.php?dataprova='+$('#dataprova').val() );
            });
        });
    </script>

    <style type="text/css">
        .carregando{
            color:#666;
            display:none;
        }

        #carrregando_tipo_2 {
          float: right;
          font-size: 10px;
          margin-right: 10px;
          display:none;
        }       
    </style>


<div class="internas"><div class="titulo"><span>

    <h3>TESTE COMBOBOX</h3></div>
    <div class="dicas">
  <p><select name="laboratorio" id="laboratorio">
    <option>Selecione um tipo</option>

        </select>
</div>
    <!-- DATA PROVA -->
    <div id="carrregando"></div> 

    <span class="carregando"> 
        <img src="loading-02.gif"> Aguarde, carregando...
    </span>

    <span name='dataprova' id="dataprova">

    </span>

    <!-- HORARIO PROVA -->
    <div id="carrregando"></div> 

    <span class="carregando"> 
        <img src="loading-02.gif"> Aguarde, carregando...
    </span>

    <span name='horaprova' id="horaprova">

    </span>

</div>

Only the data prova appears. Already the hora prova does not carry.

Answer 1

Basically the change event is only triggered when the user interacts with the element. When javascript changes the values of select the change event is not triggered, then you must fire it manually. Example:

$('#dataprova').load('subcategorias.php?laboratorio='+$('#laboratorio').val() ).trigger("change"); 

Take a look at the Trigger.