如何使用jquery显示基于变量值的列表框选项？
[英]How display listbox option based on a variable value using jquery?
问题描述
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. 
我有一个带选项的选择框现在我只想显示值id大于用户输入值的那些选项。
<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. 请帮帮我。
3 个解决方案
解决方案1
2 2017-08-05 11:24:28
You need to use .filter() to filtering options tag. 您需要使用.filter()来过滤选项标记。 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>
解决方案2
1 已采纳 2017-08-05 11:28:14
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/>
解决方案3
0 2017-08-05 11:40:32
<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 这是jquery代码
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
}); }）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.