Question

I have a select box with options now I want to show only those options which value id is greater than the user input value.

<select class="form-control" required="" id="dtime" name="time">
  <option value="0" >Select Time</option>
  <option value="13" hidden>Something</option>
  <option value="14" hidden>Something</option>
  <option value="20" hidden>Something</option>
</select>

this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

Answer 1

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.

var userInput = 13;
$(".form-control > option").filter(function(){
  return this.value > userInput;
}).show();

var userInput = 13;
$(".form-control > option").filter(function(){
  return this.value > userInput;
}).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
  <option value="0" >Select Time</option>
  <option value="13" hidden>Something 13</option>
  <option value="14" hidden>Something 14</option>
  <option value="20" hidden>Something 20</option>
</select>

Answer 2

You cn try this:

$(document).ready(function(){
    $("#txtUserInput").keyup(function(){
         getUserInput(this);
    });
    
});

function getUserInput(_this){
    var userInput=parseInt($.trim($(_this).val()));
         if(userInput!=null && userInput != isNaN){
            $("#dtime option").each(function(){
               
                var option=parseInt($.trim($(this).val()));
                if(option!=0 && option<userInput){
                    $(this).css("display","none");
                }
                else{
                   $(this).css("display","block");
                }
            });
         }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

Answer 3

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

</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>

<input id="inputData" value="0">
</html>

here is jquery code

 $("#inputData").on('blur', function(){ 

    var inputd = parseInt($(this).val());

 $("#dtime option").each(function(){ 
     if(parseInt($(this).val()) <= inputd ){
          $(this).hide();
    }
 });

});

How display listbox option based on a variable value using jquery?

3 个答案: