javascript - 如何使用 jquery 显示基于变量值的列表框选项？

Question

我有一个带有选项的选择框，现在我只想显示那些值 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>

这是我的选择框。用户将输入一个值，我只希望显示值大于用户输入的选项。请帮我解决这个问题。

Answer 1

您需要使用 .filter()过滤选项标签。在函数回调中检查每个选项的值是否大于用户输入值。

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>