Have a select selected with jquery

Question

Have a select selected with jquery

Navigation

#1 by (0 votes)

0

I have this function that depending on the value that I put in my select "DurationTurning" shows some things or others. Everything works to perfection, the only problem is that in one of the if I have that if it has the value '16: 00 'hours selected, select the value '10: 00' in the select 'selectTurno' and hide the value "16:00". The value "16:00" hides it from me every time I change the value of the select "DurationTurning", but selecting the value "10:00" only works for me only once. I want him to always do it.

JavaScript file

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

HTML file

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

jquery

asked by auremanci 14.01.2018 в 14:53

source

1 answer

Error in CSS Button Menu in the iPad or iPhone browser how to cancel Alarmmanager

score 0 · Accepted Answer

I propose this solution to you.

To establish what value has to be selected, this would suffice: $("#selectTurno").val("10:00"); . By doing so, the selected element will be the one whose value is 10:00 .

Instead of trying to hide the options with hide , which is not at all obvious and taking into account that according to the browser you might have a problem with hide , you can play with the property enabled/disabled , so that when 10:00 is selected, deactivate the option 16:00 , and vice versa.

In jQuery currently, it is recommended to use prop instead of attr , that's why I have changed in the code all attr by prop .

The code could be improved and you could implement something similar to: activate only the selected option and disable all other . It would be very useful in case there could be several options and you would avoid the headache of having to be hiding and showing options as the case may be.

I hope this helps you solve the problem.

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