jQuery HTML“选择”隐藏值大于指定的选项

西奥孤儿

我希望能够在html“选择”中隐藏某些选项，这些选项的值大于特定变量的值：

这是我的html中的简单“选择”，最初具有所有可用选项：

<select class="form-control" id="results_per_page">
    <option value="4">4</option>
    <option value="8">8</option>
    <option value="12">12</option>
    <option value="16">16</option>
    <option value="20">20</option>
    <option value="28">28</option>
    <option value="40">40</option>
    <option value="80">80</option>
    <option value="120">120</option>
</select>

现在，我的脚本如下所示：

var itemsFound = "22"; //that's an example -can be any number

// I want to hide the options that are greater than "itemsFound"
$('#results_per_page').find('option[value > "'+itemsFound+'"]').hide();

上面的行返回“未捕获的错误：语法错误，无法识别的表达式：option [value>“ 22”]

当我使用“等于”时，它起作用：

$('#results_per_page').find('option[value = "40"]').hide(); //the option with value "40" is indeed hidden

关于如何实施的任何想法？

亚历克斯·查尔

您可以遍历每个项目并检查值：

var itemsFound = "22"; //that's an example -can be any number
itemsFound = parseInt(itemsFound, 10);
//iterate through each option
$('#results_per_page option').each(function() {
  //better use parseInt to avoid unexpected bahavour
  currentItem = parseInt($(this).attr("value"), 10);
  //your condition
  if (currentItem > itemsFound) {
    $(this).hide();
  }

});

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

<select class="form-control" id="results_per_page">
  <option value="4">4</option>
  <option value="8">8</option>
  <option value="12">12</option>
  <option value="16">16</option>
  <option value="20">20</option>
  <option value="28">28</option>
  <option value="40">40</option>
  <option value="80">80</option>
  <option value="120">120</option>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。