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

您可以使用在選項是有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 2

試試這個，使用.filter()。您必須使用​​或+$(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 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/