JS - hide options based on value attribute

Question

I need to hide all options when the value attribute is > 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!

If I remember right, not all browsers allow you to hide options — epascarello, Dec 29 '16 at 16:54
You want to hide all options if the user select the option with value=23 ? — B. Assem, Dec 29 '16 at 16:56
Possible duplicate of [jQuery: Selecting all elements where attribute is greater than a value](http://stackoverflow.com/questions/2613648/jquery-selecting-all-elements-where-attribute-is-greater-than-a-value) — damienfrancois, Dec 29 '16 at 18:32

score 4 · Accepted Answer · answered Dec 29 '16 at 16:55

You can use jquery filter() on the options that have the value attribute - see demo 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>

Daniel Corzo · Answer 2 · 2016-12-29T17:37:58.437

Try this, using .filter(). You must convert the value attribute to 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>

score 0 · Answer 3 · answered Dec 29 '16 at 17:04

I'm assuming you would like to listen for changes to the selection, showing them all initially. In that 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/

JS - hide options based on value attribute

3 Answers3