<div class="modal fade" id="traslado" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">TRASLADAR PEDIDO</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="traslado_mesa" name="traslado_mesa" method="post">
                    <div id="resultados_tras"></div>
                    <h5 class="modal-title">Seleccione Zona</h5>
                    <select class="form-control" name="zona_destino" id="zona_destino" required>
                        <option value=" ">--</option>
                        <?php
                        $datos=mysqli_query($con,"SELECT * FROM zonas where empresa='$empresa'");
                        while( $fila = mysqli_fetch_array( $datos ) )
                        {
                             echo' <option value="'.$fila['zon_id'].'">'.$fila['zon_nombre'].'</option>';
                        }
                        ?>
                    </select>
                    <div class="form-group" >
                        <h5 class="modal-title">Mesa Destino</h5>
                        <select id="mesa_destino" name="mesa_destino" class="form-control" required>
                        </select>
                    </div>
                    <input type="hidden" name="pen_id" id="pen_id" value="<?php echo $pen_id;?>" >
                    <input type="hidden" name="mesa_ocupada" id="mesa_ocupada" value="<?php echo $mes_nombre;?>" >
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" id="btn_tras" class="btn btn-success">Trasladar</button>
                    </div>
              </form>
            </div>
        </div>
     </div>
</div>
<!-- funsion selct asociativos -->
<script type="text/javascript">
$(document).ready(function(){
    $("#zona_destino").change(function(){ 
        $.get("php_pedidos/mesas_traslado.php","zona_destino="+$("#zona_destino").val(), function(data){
            $("#mesa_destino").html(data);
            console.log(data);
        });
    });
});

$("#traslado_mesa" ).submit(function( event ) {
$('#btn_tras').attr("disabled", true);

var parametros = $(this).serialize();
$.ajax({
    type: "POST",
    url: "php_pedidos/registrar_traslado_mesa.php",
    data: parametros,
    beforeSend: function(objeto){
        $('#resultados_tras').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
      },
    success: function(datos){
        $("#resultados_tras").html(datos);
        $('#btn_tras').attr("disabled", false);
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        
        // setTimeout(function() { $('#traslado').fadeOut('fast'); }, 1000); // <-- cerrar div en 1 seg
        // setTimeout(function() { $('#resultados_tras').fadeOut('fast'); }, 1000); // <-- cerrar div en 1 seg
        loadmesa();
        window.location.reload()
    }
});
event.preventDefault();
})
</script>