-1

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>

and

jQuery(document).on('change', 'select', function () {
    $('.product_names option').hide();
    });


jQuery(document).on('change', 'select', 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>

and

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


jQuery(document).ready(function() {
      jQuery("select").change(function(){
           $("select option").hide();
      }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="product_names">
  <option>Select option</option>
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>
Pamu Shinde
  • 17
  • 5
  • Please make a [mcve] that replicates the problem. – Roope Jun 03 '19 at 14:22
  • 4
    ` – SLaks Jun 03 '19 at 14:23
  • 1
    *"When the page loads, I want all the dropdown option to hide"* Your code is doing that when the user selects something from the select box, not when the page loads. (And *hiding* the options is...odd.) – T.J. Crowder Jun 03 '19 at 14:23
  • @T.J. Crowder Yes, hiding all the option is odd...but i dont want to show up any of the select option but still i see all the option is showing – Pamu Shinde Jun 03 '19 at 14:31
  • Possible duplicate of [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – esqew Jun 03 '19 at 14:36
  • Have you tried binding to window instead? `$(window).on('load', function(){ $("#product_names").children('option').hide();});` – TheUnKnown Jun 03 '19 at 14:58

1 Answers1

0

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");
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks, I like to detach the options but I want to show the first option from the dropdown which says select option. Currently the detach() is hiding all the options from the dropdown – Pamu Shinde Jun 03 '19 at 15:06
  • @PamuShinde - Just exclude the first one from the `find`, jQuery's [API](http://api.jquery.com/) is quite simple and well-documented. For instance, one way is `.find("option:not(:first)").` – T.J. Crowder Jun 03 '19 at 15:09