JS - hide parameters based on value attribute

Question

I need to hide all parameters if value attribute> 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> 

But this code does not work:

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

Thanks for your ideas!

Answer 1

You can use jquery filter() parameters that have the value attribute, see below:

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

Try this using .filter() . You must convert the value attribute to a number using Number() or +$(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

I assume that you want to listen to the changes in the selection, showing them all at the initial stage. In this case, you can use the $.change() listener

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

https://jsfiddle.net/qee4qccv/

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