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

Question

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

Why do you have .hide in the class of the select option? you are hiding the entire select tag — Michael
– Michael, Commented Jul 30, 2014 at 21:40

Code Maverick · Accepted Answer · 2014-07-30 21:40:29Z

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

PeterKA · Accepted Answer · 2014-07-30 21:46:43Z

0

You're somehow on the right track: DEMO

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

edited Jul 30, 2014 at 21:46

answered Jul 30, 2014 at 21:40

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

1 Comment

Code Maverick Over a year ago

You forgot the # in your selector.

Rudolph Gottesheim · Accepted Answer · 2014-07-30 22:02:39Z

-1

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>.

edited Jul 30, 2014 at 22:02

answered Jul 30, 2014 at 21:46

Rudolph Gottesheim

1,7111 gold badge17 silver badges31 bronze badges

7 Comments

Rudolph Gottesheim Over a year ago

Really weird. In my example they don't: jsfiddle.net/tSGX4/1. Still, if they do, seems a bit "hackey" to me. <option>s are data sources for the <select> element, not visual elements.

Code Maverick Over a year ago

In your example ... they are hidden for me.

Rudolph Gottesheim Over a year ago

Chrome 37. They don't for me. Anyway, just have a look at the edit in my post and reconsider your downvote if you agree. :) Thanks!

Code Maverick Over a year ago

Hmmm ... I was using Chrome Version 36.0.1985.125 m. That said, if you remove the you cannot hide options statement I'll remove my DV. Obviously you can hide them.

Rudolph Gottesheim Over a year ago

Updated my answer. Fair enough?

|

Collectives™ on Stack Overflow

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

This is what I tried:-

3 Answers 3

Comments

1 Comment

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

This is what I tried:-

3 Answers 3

Comments

1 Comment

7 Comments

Related