-1

Feature-detect ability to hide select options

I want to detect whether a browser can successfully hide option elements inside select controls.

I have this rather kludgy (half) solution, which meddles with actual elements on the page:

$().ready(function() {
    var el = $("form").find("option.hide");
    var supportsHiddenOptions = el.hide().is(":hidden");
    console.log(supportsHiddenOptions);
});

<form>
    <select>
    <option val="1">Static</option>
    <option val="2" class="hide">Hide Me</option>
    </select>
</form>

This works some of the time: MSIE 11 reports it cannot hide option elements; current Chrome/FF/Opera report they can.

On the other hand, Safari reports it can hide the option, but it does not.

Is there a way to detect whether a browser can hide option elements without manipulating actual DOM elements?

Note, this question shows what you can do instead to hide option elements in MSIE, but I'm interested in detecting the ability simply to hide them.

Community
  • 1
  • 1
Tim Grant
  • 3,300
  • 4
  • 23
  • 31

1 Answers1

0

You can use Bowser to detect browser

Artem Dudkin
  • 588
  • 3
  • 11
  • 1
    You should never use browser detection, if there is a way to do it using feature detection. Detecting features using the user agent is very error prone. – t.niese Dec 14 '16 at 21:19
  • I'm aware of browser detection. The question, though, is specifically about feature detection. – Tim Grant Dec 15 '16 at 17:55