2

Estoy realizando un proyecto de PHP de inscripcion. Tengo un combobox llamado horario que contiene las horas de 08:00am - 12:00pm y de 03:00pm - 05:00pm. Para llenar ese combo, uso lo siguiente:

<div class="form-group" style="padding: 20px">
    <label for="horario" class="col-sm-3 control-label">horario<span class="asterisco">*</span> </label>
    <div class="col-md-8">
        <select class="form-control" name="cbx_horario" id="cbx_horario">
            <option value="0"> seleccionar horario</option>
            <option value="08:00am-12:00pm"> 08:00am-12:00pm</option>
            <option value="03:00pm-05:00pm"> 03:00pm-05:00pm</option>
        </select>
    </div>
</div>

Y tengo otro combobox que contiene los cursos que van a ir asociados a ese combobox (horario) al momento de registrarlos. Ese combobox se llena con datos que estan en la base de datos, y para mostrarlos lo hago de la siguiente manera..

<?php $query = "SELECT id_curso, nombre_curso FROM curso ORDER BY nombre_curso";
    $resultado=$mysqli->query($query); ?>  
    <label for="nombres" class="col-md-3 control-label"> Curso:<span class="asterisco">*</span> </label>
    <div class="col-md-8 ">
      <select name="cbx_curso" id="cbx_curso" class="form-control">
          <option value="0" style="">Seleccionar Curso</option>     
          <?php while($row = $resultado->fetch_assoc()) { ?>
          <option value="<?php echo $row['id_curso']; ?>"><?php echo $row['nombre_curso']; ?></option>
          <?php } ?>
      </select>
    </div>

Y esta es mi base de datos:

mi base de datos

Lo que necesito saber es como poder desaparecer aquellos cursos que dicen matutino al elegir el horario de 03 - 05 del combobox horario de igual forma como hacer desaparecer los cursos de vespertino al elegir el horario de 08 - 12.

1 respuesta 1

0

Lo que deseas, se puede hacer con jQuery, pero tendrás que cambiar los values del primer combobox (en el segundo combobox estoy añadiendo el "disabled" para que no puedan elegir hasta que eligan una opción del primer combobox):

$("#cbx_horario").on("change", function() {
        var value   = $(this).val();
        var name    = $("#cbx_curso");
        var curso   = name.val();

        if(value == "0") {
            name.prop("disabled", true);
        } else {
            name.prop("disabled", false);
            name.find("option").each(function() {
                (value == "matutino") ? "matutino" : "vespertino"
                var option = $(this).val();
                var word = option.indexOf(value);
                (word > 1) ? $(this).show() : $(this).hide()
            });
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="cbx_horario" id="cbx_horario">
        <option value="0"> seleccionar horario</option>
        <option value="matutino"> 08:00am-12:00pm</option>
        <option value="vespertino"> 03:00pm-05:00pm</option>
    </select>
  
  <select name="cbx_curso" id="cbx_curso" class="form-control" disabled>
        <option value="0" style="">Seleccionar Curso</option>
        <option value="Guitarra-(matutino)">Guitarra-(matutino)</option>
        <option value="Guitarra-(vespertino)">Guitarra-(vespertino)</option>
        <option value="Flauta-(matutino)">Flauta-(matutino)</option>
        <option value="Violin-(matutino)">Violin-(matutino)</option>
        <option value="Cuatro-(vespertino)">Cuatro-(vespertino)</option>
        <option value="Cuatro-(matutino)">Cuatro-(matutino)</option>
    </select>

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.