Skip to main content

Lo que deseas, se puede hacer con jQuery, pero tendrás que cambiar los values del primer 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()
        });
    }
});

Y en (en el segundo combobox estoy añadiendo el "disabled" para que no puedan elegir hasta que eligan una opción del primer combobox):

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

Ejemplo: http://jsbin.com/rucajelano/edit?html,js,output

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

Lo que deseas, se puede hacer con jQuery, pero tendrás que cambiar los values del primer 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()
        });
    }
});

Y en el segundo combobox estoy añadiendo el "disabled" para que no puedan elegir hasta que eligan una opción del primer combobox

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

Ejemplo: http://jsbin.com/rucajelano/edit?html,js,output

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>

Origen Enlace
Raul
  • 264
  • 1
  • 8

Lo que deseas, se puede hacer con jQuery, pero tendrás que cambiar los values del primer 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()
        });
    }
});

Y en el segundo combobox estoy añadiendo el "disabled" para que no puedan elegir hasta que eligan una opción del primer combobox

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

Ejemplo: http://jsbin.com/rucajelano/edit?html,js,output