how to remove options from a combo when selecting options from another combobox

0

I am doing a PHP project of registration, I have a combobox called schedule that contains the hours of 08:00 am-12:00pm and 03:00 pm-05:00pm to fill that combo I use the following

<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>

and I have another combobox that contains the courses that will be associated with that combobox (time) at the time of registration, that combobox is filled with data that are in the database, and to show them I do it in the following way ..

<?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>

and this is my database

What I need to know is how to disappear those courses that say morning by choosing the time of 03-05 of the time combobox in the same way as to make disappear the evening courses when choosing the 08-12 hours

    
asked by rodrigo2324 17.08.2017 в 18:24
source

1 answer

0

What you want, you can do with jQuery, but you will have to change the values of the first combobox:

HTML:

<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>

JQUERY

$("#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()
        });
    }
});

And in the second combobox I am adding the "disabled" so that they can not choose until they choose an option of the first combobox

<select name="cbx_curso" id="cbx_curso" class="form-control" disabled>

Example: link

    
answered by 18.08.2017 в 18:14