1

En mi página tengo un campo de tipo select que habilita un input cuando el valor de la primera es distinto a 0.

Estos son mis campos:

<div class="form-group">
    <label for="calidad">Calidad material (baja/media/alta):</label><br>
    <select name="calidad_select" id="calidad_select">
        <option value="0">Selecciona...</option>
        <option value="1">Baja</option>
        <option value="2">Media</option>
        <option value="3">Alta</option>
    </select>
    <input class="form-control" type="number" step="any" name="calidadmaterial" id="calidadmaterial" disabled/>
</div>

El código JQuery/Javascript que regula el comportamiento de la select es el siguiente:

    $(function() {
        $("#calidad_select").change(function() {
        if ($(this).val() !== "0") {
            $("#calidadmaterial").prop("disabled", false);
        } else {
            $("#calidadmaterial").prop("disabled", true);
            $("#calidadmaterial").change(function() {
                var valorSelect = $("#calidadmaterial").val()
                if (valorSelect > 0 && valorSelect < 6000){
                    $("#calidad_select").val(1).change();
                } else if (valorSelect > 6000 && valorSelect < 16000){
                    $("#calidad_select").val(2).change();
                } else {
                    $("#calidad_select").val(3).change();
                }
            });
        }
    });
});

Mi idea es que cuando el usuario escriba en el input, el value de la select cambie, es decir que si un valor que le pase al input el usuario es menor a 6000 que value cambie a 2, si es mayor a 6000 y menor a 16000 que cambie a 1, si es mayor de 16000 que cambie a 3, ¿cómo podría mejorar este código para que esto pueda funcionar en mi página?

1 respuesta 1

2

Podes hacer una funcion que al detectar que se presiona una tecla en el input (porque si usas change te toma el cambio cuando salis del input, luego de haber escrito, y es un poco raro para la experiencia de usuario) guarde el numero en una variable y lo analice. En base a la condicion modifica el select.

Le podes agregar una funcion debounce para que no ejecute la condicion a cada instante, sino que te espere unos 200ms antes de hacerlo, de esta manera cuando el usuario pone "16000" en lugar de ejecutar 5 veces el calculo, espera al ultimo 0 para hacerlo.

$(function() {    
        $("#calidadmaterial").keyup(function(e) {
           const val = e.target.value;
           if (val > 0 && val < 6000){
             $("#calidad_select").val(1).change();
           } else if (val >= 6000 && val < 16000){
             $("#calidad_select").val(2).change();
           } else {
             $("#calidad_select").val(3).change();
           }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="calidad">Calidad material (baja/media/alta):</label><br>
    <select name="calidad_select" id="calidad_select">
        <option value="0">Selecciona...</option>
        <option value="1">Baja</option>
        <option value="2">Media</option>
        <option value="3">Alta</option>
    </select>
    <input class="form-control" type="number" step="any" name="calidadmaterial" id="calidadmaterial"/>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.