Skip to content Skip to sidebar Skip to footer

Jquery If With Multiple Value Show And Hide Element

I'm quite new with jquery, kindly need any of your assitance for my below question: I have an input where users can type some number that less than 3 digit, and have prefix start w

Solution 1:

try this:

$('#check').on('keyup change', function(c) {

    //initially hide allif(this.value.length < 3){
        $('#three, #two, #one').hide();
    }
    else{

        switch(parseInt(this.value)){

            case123: case124: $('#one').show(); break;
            case234: case235: $('#two').show(); break;
            case345: case346: $('#three').show(); break;
        }

    }
});

Solution 2:

Of course it is possible to simplify the OP code. Something like this.

$(function() {//arg c is not used

    $('#check').on('keyup change', function() {//c is event object and is not used//note that 'c' from outer function is not 'c' in inner function//no need to re-request #checkvar one = $(this);//$('#check'); 
    $('#one, #two, #three').hide();//all in oneif( (one.val() == 123) || (one.val() == 124) ) {
            $('#one').show();
            //optionnalyreturn;
        } 
    if( (one.val() == 234) || (one.val() == 235) ) {
            $('#two').show();
            //optionallyreturn;
        } 
    if( (one.val() == 345) || (one.val() == 346) ) {
            $('#three').show();
        } 

    }); 
    
});
#one {
display: none;
}
#two {
display: none;
}
#three {
display: none;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><inputtype="text"id="check"maxlength="10"><divid="one"><br>
ONE
</div><divid="two"><br>
TWO
</div><divid="three"><br>
THREE
</div>

Solution 3:

Less than 3 digit or equal to 3 digit?

Your question and your code are confusing, but try this code:

jQuery:

$('#check').on('keyup change', function() {
    var val = $('#check').val();
    if ($.isNumeric(val) && val.length == 3) { //if value is numeric and contain 3 digits
        $('#one').toggle(val[0]=='1');   //show if first digit is 1 else hide
        $('#two').toggle(val[0]=='2');   //show if first digit is 2 else hide
        $('#three').toggle(val[0]=='3'); //show if first digit is 3 else hide
    } 
    else {
        $('#one,#two,#three').hide();   //hide them all
    }
}); 

CSS:

#one,
#two,
#three {
   display: none;
}

Good luck and keep learning! Please correct me if I misunderstand your question.

UPDATE:

Seems this is what you need:

$('#check').on('keyup change', function() {
    var val = $('#check').val();
    var prf = val.substring(0,3);
    if ($.isNumeric(val) && val.length >= 3) { //if values is numeric and contain at least 3 digit
        $('#one').toggle(prf=='123'); //show if first 3 digits is '123' else hide
        $('#two').toggle(prf=='234'); //show if first 3 digits is '234' else hide
        $('#three').toggle(prf=='345'); //show if first 3 digits is '345' else hide
    } else {
        $('#one,#two,#three').hide();
    }
}); 

Solution 4:

Or, if you want to type even less, you could do the following:

$(function(c) {
 a=['one','two','three','four'];
 $('#check').on('keyup',function(){
  var cval=$('#check').val()
  a.forEach(function(id,i){
   var key=newRegExp('^'+(i+1)+(i+2)+'['+(i+3)+(i+4)+']');
   $('#'+id).toggle(key.test(cval))
  })
 })
});
#one,#two,#three,#four { display: none; }
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><inputtype="text"id="check"maxlength="10"><divid="one"><br>
ONE
</div><divid="two"><br>
TWO
</div><divid="three"><br>
THREE
</div><divid="four"><br>
FOUR
</div>

By simply extending the array a you can even have a few more cases covered. But soon you will get into double digit numbers ... ;-)

Post a Comment for "Jquery If With Multiple Value Show And Hide Element"