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 all
    if(this.value.length < 3){
        $('#three, #two, #one').hide();
    }
    else{

        switch(parseInt(this.value)){

            case 123: case 124: $('#one').show(); break;
            case 234: case 235: $('#two').show(); break;
            case 345: case 346: $('#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 #check
    var one = $(this);//$('#check'); 
    $('#one, #two, #three').hide();//all in one
    if( (one.val() == 123) || (one.val() == 124) ) {
            $('#one').show();
            //optionnaly
            return;
        } 
    if( (one.val() == 234) || (one.val() == 235) ) {
            $('#two').show();
            //optionally
            return;
        } 
    if( (one.val() == 345) || (one.val() == 346) ) {
            $('#three').show();
        } 

    }); 
    
});

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

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

<input type="text" id="check" maxlength="10">

<div id="one">
<br>
ONE
</div>

<div id="two">
<br>
TWO
</div>

<div id="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=new RegExp('^'+(i+1)+(i+2)+'['+(i+3)+(i+4)+']');
   $('#'+id).toggle(key.test(cval))
  })
 })
});

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

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

<input type="text" id="check" maxlength="10">

<div id="one">
<br>
ONE
</div>

<div id="two">
<br>
TWO
</div>

<div id="three">
<br>
THREE
</div>

<div id="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 ... ;-)