AnswerBun.com

Como eliminar opciones de un combo al seleccionar opciones de otro combobox

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.

Stack Overflow en español Asked on December 30, 2020

1 Answers

One Answer

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>

Answered by Raul on December 30, 2020

Add your own answers!

Related Questions

como iterar fila por fila en pandas

1  Asked on November 4, 2021 by emanuel-lemos

     

Express.static() en Cpanel no sirve CSS

1  Asked on November 4, 2021 by gabriel-taype

     

React native APK sin servidor

1  Asked on November 4, 2021 by gabocafer

 

Generar imagen php

1  Asked on November 4, 2021

   

Cambiar el valor de input cuando introduzco un numero

0  Asked on November 4, 2021 by razvan-lismanu

     

Como usar variables if en java para dos condiciones

1  Asked on November 4, 2021 by emil-jpz

 

Implementar método async que devuelva un valor decimal

2  Asked on August 27, 2021 by pedro-vila

   

No funciona mi botón con JavaScript

1  Asked on August 27, 2021 by braylin-ivan-payano

   

No puedo llamar Clase

1  Asked on August 27, 2021 by camilo34

   

Porque no funciona mi javascript?

1  Asked on August 27, 2021

     

Python – ayuda con regex

3  Asked on August 27, 2021 by gonzalo-rojo

   

Recibir datos post en node js express js

2  Asked on August 27, 2021 by alejandrognzls

     

Problema con errores en forms Django

1  Asked on August 27, 2021 by lucas-leone

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.