How to display list option based on variable value using jquery?
I have a selection box with options. Now I want to show only those parameters whose value is greater than the value entered by the user.
<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>
it is my choice. The user will enter a value based on the fact that I only want parameters that are greater than the user input. Please help me with this.
+3
source to share
3 answers
You may try:
$(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/>
0
source to share
You need to use .filter()
to filter the parameter tags. When calling the function, check that the value of each option is greater than the value of the user input.
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>
+2
source to share
<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's the jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});
0
source to share