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);
}
}
callback
asi solo haces referencia al change delselect
y obtienes especificamente el que quieres ejemplo:$("select").on("change",function(e){ console.log(e.target); })
<select id="programa" class="form-control form-contro…orm-control-dropdown-bb" name="programa">
e.target
devuelve especicamente el select al cual se le hizo change y con$(e.target)
lo pasas a jquery......done(function(response) { $('#servicio').html(""); //resto de codigo