jquery - Why hide/show event is not working in safari

Question

When the page loads I want all the dropdown option to hide. I tried this with CSS using display: none. I tried with jQuery. However none of these is working in Safari. The code works in Chrome but not in Safari.

I've tried:

jQuery(document).ready(function ($) {
  $(".product_names option").hide();
  });

jQuery("select").change(function() {
  $(".product_names option").hide();
});

<select class="product_names">
  <option>Select option</option>
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

Answer 1

I can confirm that Safari ignores display: none on option elements.

Your best bet is probably to disable the options rather than hiding them:

$(".product_names").val("").find("option").prop("disabled", true);

If you really want them hidden, you'll need to remove them. You can always put them back if you want to later:

var options = $(".product_names").find("option").detach();

to add them back:

options.appendTo(".product_names");