0
    <script languaje="javascript"> 
    function validar(){ 
        elemento = document.getElementById('nombre').value; 
        if (!elemento){ 
            window.alert("No has ingresado nada"); 
        } 
        else{  
            if (elemento >6.5) 
            {
                document.getElementById('mensaje').style.display="block";
            }
            if (elemento =< 6.5) 
            {
                document.getElementById('modelosBovedilla').style.display="block";
                document.getElementById('max39').style.display="block";
                document.getElementById('max49').style.display="block";
                document.getElementById('max57').style.display="block";
                document.getElementById('max65').style.display="block";
            }
            if (elemento =< 5.7) 
            {
                document.getElementById('max39').style.display="block";
                document.getElementById('max49').style.display="block";
                document.getElementById('max57').style.display="block";
            }
            if (elemento =< 4.9) 
            {
                document.getElementById('max39').style.display="block";
                document.getElementById('max49').style.display="block";
            }
            if (elemento =< 3.9) 
            {
                document.getElementById('max39').style.display="block";
            }


        } 
    } 
</script>

<form> 
    <input type="text" id="nombre" onkeyup="validar()"> <br>
    <select style="width:100%;background-color:#009FF0;color:white;display: none" id="modelosBovedilla" name="modelos" >
        <option value="">Seleccionar modelo</option>
        <option value="Modelo: BOVEDILLA H-18 long máx(3.90)" style="display: none" id="max39">BOVEDILLA H-18 long máx(3.90)</option>
        <option value="Modelo: BOVEDILLA H-21 long máx(4.90)" style="display: none" id="max49">BOVEDILLA H-21 long máx(4.90)</option>
        <option value="Modelo: BOVEDILLA H-25 long máx(5.70)" style="display: none" id="max57">BOVEDILLA H-25 long máx(5.70)</option>
        <option value="Modelo: BOVEDILLA H-31 long máx(6.50)" style="display: none" id="max65">BOVEDILLA H-31 long máx(6.50)</option>
    </select>
    <h1 id="mensaje" style="display: none">NO HAY BOVEDILLAS CON QUE CUMPLAN CON ESA MEDIDA</h1>
</form>   

El código mostrado es lo que actualmente tengo.

Cabe decir que la validación tiene que ser en tiempo real, ósea si ingreso un número mayor a 10 me va a mostrar unas opciones de la lista y si es menor de 10 me muestra otras opciones.

4
  • 1
    ¿qué has intentado hasta ahora? el 18 may. 2018 a las 19:22
  • Estoy intentando hacerlo con Jquery y/o Javascript pero no me funciona el 18 may. 2018 a las 19:29
  • A lo que me refiero, es que dejes una porción de lo que intentas en código, para poder ayudarte, sino es más complicado! el 18 may. 2018 a las 19:30
  • he, actualizado mi pregunta con el código que tengo. el 18 may. 2018 a las 20:09

3 respuestas 3

0

Si quieres usar jQuery puedes usar el evento input al igual que otros más como keypress o keydown entre otros, luego, solo deberías evaluar tu condición y modificar el value del select en cuestión utilizando .val()

//Detecto el evento de cambio en el <input>
$('input').on('input',function(){

 //Chequeo, si está vacío
 if($(this).val().length == 0)
 {
 //Selecciono la opción 2
 $('select').val('2');
 return;
 }

 //Chequeo si es menor que 0
 if($(this).val() < 0)
 {
    //Selecciono la opción 0
 		$('select').val('0');
 }
 //Cualquier otro caso
 else
 { 
    //Selecciono la opción 1
 		$('select').val('1');
 }
});
input,select
{
  margin-bottom: 10px;
  font-size: 22px;
  width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number">
<br>
<select>
<option value="0">negativo</option>
<option value="1">positivo</option>
<option value="2" selected="selected">vacio</option>
</select>

Saludos

1
  • Lo intentaré con esta forma ¡muchas gracias! el 18 may. 2018 a las 20:10
0

quizás busques algo como esto (con permiso del compañero @Juan salvador Portugal, pongo la respuesta sin JQuery por si le resulta útil):

<input type="number" id="tu_input">
<br>
<select id="tu_select">
    <option value="0">negativo</option>
    <option value="1">positivo</option>
    <option value="2" selected="selected">vacio</option>
</select>



var select = document.getElementById("tu_select");
var input = document.getElementById("tu_input");

input.addEventListener("keyup", function(){
    var numero_introducido = input.value;
    if(numero_introducido < 0){
        select.selected = 0;  
     }else if (numero_introducido > 0){
        select.selected = 1;
     }else{
        select.selected = 2;
     }
});
1
  • Lo intentaré, ¡Gracias! el 18 may. 2018 a las 20:10
0

Con un condicional.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="miTexto" />
<select id="miCombo">
<select>

<script>
   var mayores = [{"codigo":"opt1","descripcion":"opcion 1"}, {"codigo":"opt2","descripcion":"opcion 2"},{"codigo":"opt3","descripcion":"opcion 3"}];
   var menores= [{"codigo":"opt10","descripcion":"opcion 10"}, {"codigo":"opt20","descripcion":"opcion 20"},{"codigo":"opt30","descripcion":"opcion 30"}];

   $("#miTexto").on("change",function(){
   $('#miCombo').empty();

     if($(this).val()>10){
       $.each(mayores, function (index, item) {
            $("#miCombo").append($("<option>", {value: item[codigo], text:item[descripcion] }));
        });
     }else{
       $.each(menores, function (index, item) {
            $("#miCombo").append($("<option>", {value: item[codigo], text:item[descripcion] }));
        });
     }
   });
</script>

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.