0

Tengo el siguiente problema, hice un select que cambia los datos de otro select. Las opciones si se muestran, el problema es que me di cuenta de un error grave; si cambio la opcion del select 1, al select 2 se le montan los datos que encuentra, no se borran las opciones que no pertecen a esa opcion

El select de programa afecta al select de servicios porque los servicios dependen del programa, el problema es que si cambio una opcion en el programa, los resultados del select de servicio se amontonan (Por ejemplo, si consigo datos de un servicio con un programa llamado "Hola mundo", si elijo otra opcion por ejemplo el programa llamado "Hola" los datos del programa que encontro Hola mundo se quedan ahi

Esto es lo que tengo en mi tpl, el select de programa afecta al select de servicios. Todo esto que ven aqui funciona, pero coloco la informacion para que sepan

{extends file='layout/layoutTables.tpl'}
{block name="content"}
    <div class="row">   
        <input type="hidden" id="Id_acceso" name="Id_acceso" value="{$Id_acceso}">                       
        <div class="col-md-12">
            <div class="col-indi-seccion">
                <h5 id="Dia" name="Dia"></h5>
            </div>
            <div class="row">

                <div class="col-md-3  mb-2">
                    <div class="input-group mb-sm-0">

                        <input
                        type="text"
                        name="fecha"
                        id="fecha"
                        class="form-control"
                        data-dtp="dtp_9VPPO"
                        value="{$fecha}"
                        placeholder="{$fecha2}">

                        <input
                        type="text"
                        name="fecha_hoy"
                        id="fecha_hoy"
                        class="form-control"
                        value="{$fecha2}"
                        hidden>

                        <div class="input-group-addon">
                            <a href=""
                            style="color: white"
                            id="calendar"
                            class="fa fa-calendar"
                            aria-hidden="true"
                            value="{$fecha}"
                            onchange="Fecha()"></a>
                        </div>
                    </div>                            
                </div>

                <div class="col-md-3 mb-2" style="display: none;">                            
                    <input
                    type="time"
                    class="form-control"
                    name="horainicio"
                    id="horainicio"
                    placeholder="Hora inicio"
                    value="" />
                </div>

                <div class="col-md-3 mb-2">                            
                    <select
                    class="form-control form-control-dropdown form-control-dropdown-bb"
                    name="instructortraer"
                    id="instructortraer">
                        <option selected style="display: none;" value="">Instructor</option>
                        <option value="">Todos los Instructores</option>
                        <option value="NADA">Instructor no asignado</option>
                        {if $rowsusuarioList > 0}
                            {foreach from=$usuarioList item=result}
                                <option value="{$result['id_usuario']}">{$result['primer_nombre']} {$result['primer_apellido']}</option>
                            {/foreach}
                        {else}
                            <option value="">No se encontró ningún instructor</option> 
                        {/if}
                    </select>
                </div>
                

                {if $superAdmin}
                    <div class="col-md-3 mb-2">
                        <select class="form-control form-control-dropdown form-control-dropdown-bb" name="centro" id="centro" >
                            <option selected  style="display: none;" value="">Estudio...</option>
                            {if $rowsCentrosList > 0}
                                <option value="">Todos los Centros</option>
                                {foreach from=$centrosList item=result}
                                    <option value="{$result['id_centro']}">{$result['nombre_centro']}</option>
                                {/foreach}
                            {else}
                                <option value="">No se encontraron centros en la base de datos.</option> 
                            {/if}
                        </select>
                    </div> 
                {/if}

              <div class="col-md-3 mb-2">                    
                    <select
                    class="form-control form-control-dropdown form-control-dropdown-bb"
                    name="programa"
                    id="programa">
                        <option selected style="display: none;" value="">Tipo de Programa...</option>
                        <option value="">Todos los Programas</option>
                        {if $rowsServiciosList > 0}
                            {foreach from=$programasList item=result}
                                <option value="{$result['id_programa']}">{$result['nombre_programa']}</option>
                            {/foreach}
                        {else}
                            <option value="">No se encontraron Programas para hoy.</option> 
                        {/if}
                    </select>
                </div>            

                <div class="col-md-3 mb-2">                            
                    <select
                    class="form-control form-control-dropdown form-control-dropdown-bb"
                    name="servicio"
                    id="servicio">
                        <option id="Id_servicio_Actual" selected style="display: none;" value="">Tipo de Servicio...</option>
                        <option value="">Todos los Tipos de Servicio</option>
                    </select>
                </div> 

            </div>

        </div>

        <div class="container">
            <div class="row justify-content-center">
                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">

                    <div class="btn-group mr-2 mt-2 pt-1 pb-1" role="group">
                        <div class="btn btn-outline-success butonChangeDate" id="today">Hoy</div> 
                    </div>

                    <div class="btn-group mr-2 mt-2 pt-1 pb-1" role="group" >
                        <div class="btn btn-outline-success" style="padding: 0px;"> 
                            <div class="btn">
                                <i
                                class="fa fa-chevron-left butonChangeDate"
                                aria-hidden="true"
                                id="buttonPreviousDay">
                                </i>
                            </div> 
                            Dia
                            <div class="btn">
                                <i
                                class="fa fa-chevron-right butonChangeDate"
                                aria-hidden="true"
                                id="buttonFollowDay">
                                </i>
                            </div>
                        </div>
                    </div>
                    <div class="btn-group mr-2 mt-2 pt-1 pb-1" role="group">
                        <div class="btn btn-outline-success" style="padding: 0px;"> 
                            <div class="btn">
                                <i
                                class="fa fa-chevron-left butonChangeDate"
                                aria-hidden="true"
                                id="buttonPreviousWeek">
                                </i>
                            </div> 
                            Semana
                            <div class="btn">
                                <i
                                class="fa fa-chevron-right butonChangeDate"
                                aria-hidden="true"
                                id="buttonFollowWeek">
                                </i>
                            </div>
                        </div>
                    </div>
                    <div class="btn-group mr-2 mt-2 pt-1 pb-1" role="group">
                        <div class="btn btn-outline-success" style="padding: 0px;"> 
                            <div class="btn">
                                <i
                                class="fa fa-chevron-left butonChangeDate"
                                aria-hidden="true"
                                id="buttonPreviousMonth">
                                </i>
                            </div> 
                            Mes
                            <div class="btn">
                                <i
                                class="fa fa-chevron-right butonChangeDate"
                                aria-hidden="true"
                                id="buttonFollowMonth"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-12">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a 
                    class="nav-link diasTab"
                    id="lunes-tab"
                    name="diasTab"
                    data-toggle="tab"
                    href="#Lunes"
                    role="tab"
                    aria-controls="Lunes"
                    aria-expanded="true">
                        Lunes
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="martes-tab"
                    data-toggle="tab"
                    href="#Martes"
                    role="tab"
                    aria-controls="Martes">
                        Martes
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="miercoles-tab"
                    data-toggle="tab"
                    href="#Miercoles"
                    role="tab"
                    aria-controls="Miercoles">
                        Miercoles
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="jueves-tab"
                    data-toggle="tab"
                    href="#Jueves"
                    role="tab"
                    aria-controls="Jueves">
                        Jueves
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="viernes-tab"
                    data-toggle="tab"
                    href="#Viernes"
                    role="tab"
                    aria-controls="Viernes">
                        Viernes
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="sabado-tab"
                    data-toggle="tab"
                    href="#Sabado"
                    role="tab"
                    aria-controls="Sabado">
                        Sabado
                    </a>
                </li>
                <li class="nav-item">
                    <a
                    class="nav-link diasTab"
                    id="domingo-tab"
                    data-toggle="tab"
                    href="#Domingo"
                    role="tab"
                    aria-controls="Domingo">
                        Domingo
                    </a>
                </li>                    
            </ul>
            <div class="tab-content" id="myTabContent">

                <!-- Lunes -->
                <div 
                class="tab-pane fade table-responsive"
                id="Lunes"
                role="tabpanel"
                aria-labelledby="lunes-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaLunes"
                    name="tablaLunes">
                    </table>                               
                </div>

                <!-- Martes -->
                <div 
                class="tab-pane fade table-responsive"
                id="Martes"
                role="tabpanel"
                aria-labelledby="martes-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaMartes"
                    name="tablaMartes">
                        </table>   
                    </div>

                <!-- Jueves -->
                <div class="tab-pane fade table-responsive"
                id="Miercoles"
                role="tabpanel"
                aria-labelledby="miercoles-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaMiercoles"
                    name="tablaMiercoles"> 
                    </table>   
                </div>

                <!-- Viernes -->
                <div class="tab-pane fade table-responsive"
                id="Jueves"
                role="tabpanel"
                aria-labelledby="jueves-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaJueves"
                    name="tablaJueves"> 
                    </table>   
                </div>

                <!-- Lunes -->
                <div
                class="tab-pane fade table-responsive"
                id="Viernes"
                role="tabpanel"
                aria-labelledby="viernes-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaViernes"
                    name="tablaViernes"> 
                    </table>   
                </div>

                <!-- Sabado -->
                <div 
                class="tab-pane fade table-responsive"
                id="Sabado"
                role="tabpanel"
                aria-labelledby="sabado-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaSabado"
                    name="tablaSabado"> 
                    </table>   
                </div>

                <!-- Domingo -->
                <div
                class="tab-pane fade table-responsive"
                id="Domingo"
                role="tabpanel"
                aria-labelledby="domingo-tab">
                    <table
                    class="table table-bordered table-hover"
                    id="tablaDomingo"
                    name="tablaDomingo"> 
                    </table>   
                </div>
            
            </div>
        </div>

        <div class="col-md-12 pt-4 pb-2">
            <div id="totalSesiones"></div>
            <div id="detalleAsistencia"></div>
            <div id="totalUtilizacion"></div>
        </div>
    </div>
{/block}

{block name="script"}
    {include file="horario/verAgenda/shedulingJs.tpl"}
{/block}

Este es el js, lo que quiero es que este js elimine las opciones, el php no es importante en este caso veo yo. Pero si lo necesitan, hare una edicion

    $("#programa").change(function(){

        buscarClaseFinal();
    
    datos = { 
       'opcion': 'mostrarServicio',
       'programa': $("#programa").val(),
        'fecha':  $("#fecha").val(),
        'search':  "",
    };
    
    var servicio = $('#servicio').val();

    $.ajax({   
  
    type: "POST",  
    url: "../controllers/servicioController.php", 
    data: datos,        
    }).done(function(response) {

        if(servicio == null){
            html=`<option style="display: none; selected" value="">Todos los Servicios</option>`
        }else{
            html=`<option style="display: none;" value="">Todos los Servicios</option>`   
        }
        
    var data = JSON.parse(response).respuesta;
    var success = JSON.parse(response).success;
    var valores = eval(data);

        // loop through our returned data and add an option to the select for each province returned
        for(i=0;i<valores.length;i++){
            
            html+=`
            <option value=`+valores[i]['id_servicio']+`>
                `+valores[i]['nombre_servicio']+`
            </option>`
              
        }

        if(servicio== null){
            $("#servicio").data("default-value",$("#servicio").val());
        }else{
            $('#servicio').append(html); 
        }


    });
    
    });

Esto es lo que tengo en el servicioController

    if($opcion == 'mostrarServicio'){ 

        foreach ($_POST as $nombre => $valor) {

            $datos[$nombre] = htmlentities($valor);

            $datos[$nombre] = html_entity_decode($datos[$nombre]); 

        }

        self::seleccionarServicio($datos);
 
    }

function selectServicio($datos){

    $servicio = new servicioModel;

    return $servicio->getListServicio($datos);

}


function seleccionarServicio($datos){

    $json = array();


    $list = self::selectServicio($datos);
    if($list != null){
        $json['respuesta'] = $list;
        $json['msj'] = 'Se han encontado con exito los Tipos de Servicio';
        $json['success'] = true;
    }else{
        $json['respuesta'] = $list;
        $json['msj'] = 'No se encontraron Tipo de Servicio';
        $json['success'] = false;
    }


    echo json_encode($json);

    
}

Y esto es lo que tengo en el modelo, para estar seguro

public function getListServicio($datos){  

    require '../require/Conexion.php';

    $search = $datos["search"];

    $programa = $datos["programa"];

    $fecha = $datos["fecha"];

    $newDate = date("Y-m-d", strtotime($fecha));


    if($programa === ""){

    $sql="SELECT sv.id_servicio, sv.id_estatus, sv.nombre_servicio FROM ec_servicio AS sv WHERE sv.nombre_servicio LIKE '%".$search."%'  ORDER BY sv.nombre_servicio ASC;"; 

    
    $result = @mysqli_query($mysqli, $sql);// or die(mysqli_error($conn));

    if(!$result){ 

        return null;

    }

    $numeroFilas = mysqli_num_rows($result);
        

    if($numeroFilas <= 0){

        return null;    

    }else{

        while ($resultado=mysqli_fetch_array($result)){


            $arreglo[]=$resultado;
        }

        return $arreglo;
    }
        
    mysqli_close ($mysqli);
}else{
    $sql="SELECT ec_clase_raiz.id_clase, ec_clase_raiz.id_servicio, ec_servicio.id_servicio, 
    ec_servicio.nombre_servicio, ec_clase_raiz.id_programa,
    ec_clase_final.id_clase, ec_clase_final.fecha_clase
    FROM ec_clase_raiz, ec_programa, ec_servicio, ec_clase_final
    WHERE ec_clase_raiz.id_programa = '$programa'
    AND ec_clase_raiz.id_clase = ec_clase_final.id_clase
    AND ec_clase_raiz.id_servicio = ec_servicio.id_servicio
    AND ec_clase_final.fecha_clase = '$newDate' LIMIT 1"; 

    
    $result = @mysqli_query($mysqli, $sql);// or die(mysqli_error($conn));

    if(!$result){ 

        return null;

    }

    $numeroFilas = mysqli_num_rows($result);
        

    if($numeroFilas <= 0){

        return null;    

    }else{

        while ($resultado=mysqli_fetch_array($result)){


            $arreglo[]=$resultado;
        }

        return $arreglo;
    }
        
    mysqli_close ($mysqli);
}
}
5
  • que tal si pasa el evento al callback asi solo haces referencia al change del select y obtienes especificamente el que quieres ejemplo: $("select").on("change",function(e){ console.log(e.target); })
    – Bryro
    Commented el 12 oct. 2020 a las 14:32
  • No entendi lo que me dijiste, pero hice eso y me trajo fueron los datos del <select id="programa" class="form-control form-contro…orm-control-dropdown-bb" name="programa">
    – Shredder
    Commented el 12 oct. 2020 a las 14:42
  • dices que tu problemas es que ambos select se llenan con lo mismo aunque no coincidan,,, con el fragmento de codigo ese e.target devuelve especicamente el select al cual se le hizo change y con $(e.target) lo pasas a jquery.....
    – Bryro
    Commented el 12 oct. 2020 a las 14:45
  • El select de programa afecta al select de servicios porque los servicios dependen del programa, el problema es que si cambio una opcion en el programa, los resultados del select de servicio se amontonan (Por ejemplo, si consigo datos de un servicio con un programa llamado "Hola mundo", si elijo otra opcion por ejemplo el programa llamado "Hola" los datos del servicio que encontro el programa Hola mundo se quedan ahi
    – Shredder
    Commented el 12 oct. 2020 a las 14:59
  • bueno solo tienes que limpiar antes de agregar... .done(function(response) { $('#servicio').html(""); //resto de codigo
    – Bryro
    Commented el 12 oct. 2020 a las 15:06

2 respuestas 2

0

Creo que puede aprovechar mejor el uso de jQuery y recorrer los datos usando .each, los datos se montan porque solo concatenas la respuesta a lo que ya hay, para que eso no pase debes limpiar el select ya sea antes de hacer la petición ajax o al obtener la respuesta:

$("#programa").change(function () {
            //aqui debe limpiar el select que depende de este usando
            //$('#miSelect option').remove()
            buscarClaseFinal();
            datos = {
                'opcion': 'mostrarServicio',
                'programa': $("#programa").val(),
                'fecha': $("#fecha").val(),
                'search': "",
            };
            $.ajax({
                url: "../controllers/servicioController.php",
                data: datos,
                async: true,
                dataType: 'json',
                success: function (data) { //al obtener un respuesta con exito
                    $.each(data, function (idx, item) { //se recorren los datos usando each de jUqery
                        $('#servicio').append($(`<option value=` + item['id_servicio'] + `>
                    ` + item['nombre_servicio'] + `
                    </option>`))
                    });

                },
                error: function (xhr, textStatus, errorThrown) {
                    alert('error al traer los datos')
                }
            });

        });
1
  • No soluciono mi problema, anexare el controller por si acaso
    – Shredder
    Commented el 12 oct. 2020 a las 15:24
0

Usando el comentario de Bryro, coloque esto en el js

  $("#programa").change(function(){

        buscarClaseFinal();
    
    datos = { 
       'opcion': 'mostrarServicio',
       'programa': $("#programa").val(),
        'fecha':  $("#fecha").val(),
        'search':  "",
    };
    
    var servicio = $('#servicio').val();

    $.ajax({   
  
    type: "POST",  
    url: "../controllers/servicioController.php", 
    data: datos,        
    }).done(function(response) {
        $('#servicio').html("Tipo de Servicio"); //Reiniciar el select

        if(servicio == ""){
            html=`<option style="display: none; selected" value="">Todos los Tipos de Servicios</option>`;
        }else{
            html=`<option style="display: none;" value="">Tipo de Servicio</option>`;   
        }
        
    var data = JSON.parse(response).respuesta;
    var success = JSON.parse(response).success;
    var valores = eval(data);

        if(valores == null){ 
            html=`<option style="display: none; selected" value="">No hay servicios con ese programa</option>`;
            $('#servicio').html(html);
        }else{

        // loop through our returned data and add an option to the select for each province returned
        for(i=0;i<valores.length;i++){
            
            html+=`
            <option value=`+valores[i]['id_servicio']+`>
                `+valores[i]['nombre_servicio']+`
            </option>`
              
        }

        if(servicio == null){
            $('#servicio').html(html);
        }else{
            $('#servicio').append(html); 
        }
    }

    });
    
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.