CODEWITHSUNDEEP
javascriptjqueryhtml
Steve
Steve

Reputation: 2588

Hide SELECT options which has a numeric value in HTML through JQUERY

In my following Select dropdown, I wanna hide the options which have only number in them (or which start with number).

As an example I wanna hide 28(2), 29(2), 35(2) and 49(2).

<select data-facet="field_video_tags" id="ajax-facets-selectbox-field-video-tags" name="field_video_tags" class="form-select hide processed">
   <option value="0">Select all</option>
   <option value="5">First Option (11) </option>
   <option value="38">Second Option (9) </option>
   <option value="13">Third Option (3) </option>
   <option value="28">28 (2) </option>
   <option value="29">29 (2) </option>
   <option value="35">35 (2) </option>
   <option value="49">49 (2) </option>
   <option value="8">Forth Option (2) </option>
 </select>

This is what I tried:-

$('select#ajax-facets-selectbox-field-video-tags').filter(function() {
            return ($.isNumeric($(this).val()));
        }).addClass('hide');

Ofcourse, .hide is defined as {display:none} in my css.

Thanks

Upvotes: 1

Views: 209

Answers (3)

Rudolph Gottesheim
Rudolph Gottesheim

Reputation: 1701

The behavior of applying display: none (which is what jQuery's hide() does) to <option>s is inconsistent between clients. So you should not rely on that and remove the elements instead.

$('#ajax-facets-selectbox-field-video-tags option').each(function() {
    var $option = $(this);
    if(null !== $option.text().match(/^\d/)) {
        $option.remove();
    }
})

Here's a JSFiddle.

Edit: you probably can hide the items. But I still wouldn't recommend it. Feels like hide()ing a <source> element in an <video>.

Upvotes: -1

PeterKA
PeterKA

Reputation: 24638

You're somehow on the right track: DEMO

$('#ajax-facets-selectbox-field-video-tags option').filter(function() {
        return /^\d+/.test( $(this).text() );
}).hide();

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

Here's what I would do:

http://codepen.io/anon/pen/yjBfl

$('#ajax-facets-selectbox-field-video-tags option')
  .filter(function () { return !isNaN(parseInt($(this).text())); })
  .hide();

enter image description here

Upvotes: 3

Related Questions