JS - Ukrywanie opcji opartych na atrybucie wartości

Question

muszę ukryć wszystkie opcje gdy atrybut wartość wynosi> 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> 

ale ten kod nie działa:

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

Dziękujemy za Twoje pomysły!

Answer 1

Można użyć jquery filter() na opcji które mają atrybut value - zobacz demo poniżej:

$(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

Spróbuj tego, używając .filter(). Musisz przekonwertować atrybut wartość do liczby używając Number() lub +$(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

Zakładam, że chciałbyś słuchać zmian w selekcji, pokazując je wszystkie na początku. W takim przypadku można użyć $.change() słuchacza

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

https://jsfiddle.net/qee4qccv/

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