1

Tengo esta función que dependiendo del valor que ponga que en mi select "duracionTurno" muestra unas cosas u otras. Todo me funciona a la perfección, el único problema es que en uno de los if he puesto que si tiene el valor '16:00' horas seleccionado, seleccione el valor '10:00' en el select 'selectTurno' y esconda el valor "16:00". El valor "16:00" me lo esconde todas las veces que cambio el valor de el select "duraciónTurno", pero el seleccionar el valor "10:00" solo me funciona una única vez. Yo quiero que lo haga siempre.

Archivo JavaScript

$("#duracionTurno").change(function(){
    var elegirActividades = $("#selectActividad").val();
    var elegirDuraciones = $("#selectDuracion").val();
    var selectTurno = $('#selectTurno').val();

    if(elegirActividades == 18 && elegirDuraciones == 'Avanzado - 48 horas' || elegirActividades == 18 && elegirDuraciones == 'Extremo - 10 días'){
        $('#otrasActividades').show();
        $('.sw-btn-next').addClass("disabled").attr("disabled", true);
    }else if(elegirActividades == 18 && elegirDuraciones == 'Intermedio - 8 horas'){
        $("#selectTurno option[value='16:00']").hide();
        $("#selectTurno option[value='10:00']").attr("selected",true);
        $('#otrasActividades').hide();
        $('.sw-btn-next').removeClass("disabled").attr("disabled", false);
    }else if(elegirActividades == 18 && elegirDuraciones == 'Iniciación - 4 horas'){
        $("#selectTurno option[value='16:00']").show();
        $('#otrasActividades').hide();
        $('.sw-btn-next').removeClass("disabled").attr("disabled", false);
    }else{
        $('#otrasActividades').hide();
        $('.sw-btn-next').removeClass("disabled").attr("disabled", false);
    }
});

Archivo HTML

<div class="form-group" id="elegirActividad">
    <select id="selectActividad" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona una actividad</option>
            <option value="2">Paintball</option>
            <option value="18">Supervivencia</option>
        </select>
 </div>
<div id="duracionTurno">
    <div class="form-group" id="elegirDuracion">
        <label for="mainActividad">Selecciona una duración</label>
        <select id="selectDuracion" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona una duración</option>
            <option value="Iniciación - 4 horas">Iniciación - 4 horas</option>
            <option value="Intermedio - 8 horas">Intermedio - 8 horas</option>
            <option value="Avanzado - 48 horas">Avanzado - 48 horas</option>
            <option value="Extremo - 10 días">Iniciación - 4 horas</option>
        </select>
    </div>
    <div class="form-group" id="elegirTurno">
        <label for="mainActividad">Selecciona un turno</label>
        <select id="selectTurno" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona un turno</option>
            <optgroup label="Turnos de mañana">
                <option value="10:00">10:00</option>
            <optgroup label="Turnos de tarde">
                <option value="16:00">16:00</option>
        </select>
    </div>
</div>
10
  • La parte HTML esta echo con una petición AJAX llamando a un archivo PHP que llama a la base de datos por los archivos y es bastante extenso, creo que ponerlo solo liaría más las cosas.
    – auremanci
    Commented el 14 ene. 2018 a las 14:56
  • 1
    Bienvenido a Stackoverflow. Tu pregunta no es del todo clara, lo que dices aquí: pero el seleccionar el valor "10:00" solo me funciona una única vez no se entiende. No explicas lo que debería ocurrir cuando seleccionas la hora 10:00.
    – A. Cedano
    Commented el 14 ene. 2018 a las 16:07
  • Ya he añadido el HTML. Lo que quiero decir es que cuando elijo en el select "selectActividad" la opción de "Supervivencia" con valor "18" y en el select "selectDuracion" cojo la opción "Intermedio - 8 horas", en el select "selectTurno" desaparece la opción de "16:00" y se queda seleccionado el de "10:00", pero esto solo me lo hace una vez, es decir, si vuelvo a cambiar el select "selectDuracion" y luego vuelvo a poner la opción "Intermedio - 8 horas", en el select "selecTurno" desaparece la opción "16:00" pero no se queda seleccionado la opción "10:00"
    – auremanci
    Commented el 14 ene. 2018 a las 16:29
  • A ver si podemos comprender el asunto. Por lo que dices se opera un cambio en el selectDuracion y tú quieres después de ese cambio que ocurra algo. ¿He entendido bien? Eso no puede ocurrir, porque en tu código jQuery tú no estás escuchando los eventos on change del select selectDuracion. El único cambio que tú controlas en el código es el de duracionTurno
    – A. Cedano
    Commented el 14 ene. 2018 a las 17:05
  • Perdón se me había olvidado poner el div en el que se miraba si se hacía cambios ("duracionTurno"). Ya lo he añadido, espero que quede más claro ahora
    – auremanci
    Commented el 14 ene. 2018 a las 18:21

1 respuesta 1

1

Te propongo esta solución.

  1. Para establecer qué valor tiene que seleccionarse, con esto bastaría: $("#selectTurno").val("10:00");. Haciendo eso, el elemento selected será aquel cuyo valor sea 10:00.

  2. En vez de intentar ocultar las opciones con hide, lo cual no es para nada evidente y tomando en cuenta que según el navegador podrías tener algún problema con hide, puedes jugar con la propiedad enabled/disabled, de modo que, cuando esté seleccionado 10:00 desactive la opción 16:00, y viceversa.

  3. En jQuery actualmente, se recomienda usar prop en lugar de attr, por eso he cambiado en el código todos los attr por prop.

El código se podría mejorar y podrías implementar algo parecido a: activa solamente la opción seleccionada y desactiva todas las otras. Sería muy útil en el caso de que puedan haber varias opciones y te evitaría el dolor de cabeza de tener que estar ocultando y mostrando opciones según el caso.

Espero que esto te sirva para resolver el problema.

$("#selectDuracion").change(function() {
  var elegirActividades = $("#selectActividad").val();
  var elegirDuraciones = $("#selectDuracion").val();
  var selectTurno = $('#selectTurno').val();
  if (elegirActividades == 18 && elegirDuraciones == 'Avanzado - 48 horas' || elegirActividades == 18 && elegirDuraciones == 'Extremo - 10 días') {
    $('#otrasActividades').show();
    $('.sw-btn-next').addClass("disabled").prop("disabled", true);
  } else if (elegirActividades == 18 && elegirDuraciones == 'Intermedio - 8 horas') {
    $("#selectTurno option[value='16:00']").prop('disabled', true);
    $("#selectTurno option[value='10:00']").prop('disabled', false);
    $("#selectTurno").val("10:00");
    $('#otrasActividades').hide();
    $('.sw-btn-next').removeClass("disabled").prop("disabled", false);
  } else if (elegirActividades == 18 && elegirDuraciones == 'Iniciación - 4 horas') {
    $("#selectTurno option[value='16:00']").prop('disabled', false);
    $("#selectTurno option[value='10:00']").prop('disabled', true);
    $("#selectTurno").val("16:00");
    $('#otrasActividades').hide();
    $('.sw-btn-next').removeClass("disabled").prop("disabled", false);
  } else {
    $('#otrasActividades').hide();
    $('.sw-btn-next').removeClass("disabled").prop("disabled", false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Archivo HTML
<div class="form-group" id="elegirActividad">
  <select id="selectActividad" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona una actividad</option>
            <option value="2">Paintball</option>
            <option value="18">Supervivencia</option>
        </select>
</div>
<div id="duracionTurno">
  <div class="form-group" id="elegirDuracion">
    <label for="mainActividad">Selecciona una duración</label>
    <select id="selectDuracion" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona una duración</option>
            <option value="Iniciación - 4 horas">Iniciación - 4 horas</option>
            <option value="Intermedio - 8 horas">Intermedio - 8 horas</option>
            <option value="Avanzado - 48 horas">Avanzado - 48 horas</option>
            <option value="Extremo - 10 días">Extremo - 10 días</option>
        </select>
  </div>
  <div class="form-group" id="elegirTurno">
    <label for="mainActividad">Selecciona un turno</label>
    <select id="selectTurno" class="form-control marginRight">
            <option value="vacio" disabled selected>Selecciona un turno</option>
            <optgroup label="Turnos de mañana">
                <option value="10:00">10:00</option>
            <optgroup label="Turnos de tarde">
                <option value="16:00">16:00</option>
        </select>
  </div>
</div>

2

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.