JS - 根据值属性隐藏选项

Question

当值属性> 23

时，我需要隐藏所有选项

<select id="category_ids" class="cat-search-pb" multiple >
    <option value="20">Condo for Sale</option>
    <option value="24">&nbsp;&nbsp;- Jomtien</option>
    <option value="25">&nbsp;&nbsp;- Bang Saray</option>
    <option value="21">Condo for Rent</option>
    <option value="22">House for Sale</option>
    <option value="23">House for Rent</option>
    <option value="14">Land</option>
    <option value="15">Commercial</option>
    <option value="18">New Condo Projects</option>
    <option value="19">New House Projects</option> 
</select>

但是这段代码不起作用：

$(document).ready(function () {
   $(".cat-search-pb option[value>23]").closest('option').hide();
});

谢谢你的想法！

Answer 1

试试这个，使用 .filter()。您必须使用 Number() 或 +$(this)

将值属性转换为数字

$(function() 
{
    $(".cat-search-pb option").filter(function() 
    {
        return +$(this).val() > 23;
    }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>
    <option value="20">Condo for Sale</option>
    <option value="24">&nbsp;&nbsp;- Jomtien</option>
    <option value="25">&nbsp;&nbsp;- Bang Saray</option>
    <option value="21">Condo for Rent</option>
    <option value="22">House for Sale</option>
    <option value="23">House for Rent</option>
    <option value="14">Land</option>
    <option value="15">Commercial</option>
    <option value="18">New Condo Projects</option>
    <option value="19">New House Projects</option>
</select>

Answer 2

您可以在具有 value 属性的选项上使用 jquery filter() - 请参阅下面的演示：

$(document).ready(function() {
  $(".cat-search-pb option[value]").filter(function() {
    return +$(this).val() > 23;
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>

  <option value="20">Condo for Sale</option>
  <option value="24">&nbsp;&nbsp;- Jomtien</option>
  <option value="25">&nbsp;&nbsp;- Bang Saray</option>
  <option value="21">Condo for Rent</option>
  <option value="22">House for Sale</option>
  <option value="23">House for Rent</option>
  <option value="14">Land</option>
  <option value="15">Commercial</option>
  <option value="18">New Condo Projects</option>
  <option value="19">New House Projects</option>
</select>

Answer 3

我假设您想监听对选择的更改，并在一开始就全部显示出来。在这种情况下，您可以使用 $.change() 侦听器

$( ".cat-search-pb" ).change(function(e) {
  if (e.target.value > 23) {
    $(e.target).hide()
  }
 });

https://jsfiddle.net/qee4qccv/

https://api.jquery.com/change/

JS - 根据值属性隐藏选项

JS - hide options based on value attribute

html

javascript

jquery

jquery-selectors