Option.Style.Display = "None" Not Working in Safari

option.style.display = none not working in safari

You can't toggle display on <option> elements in Safari (or IE, for that matter). This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).

Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!

Option display does not work in safari

Workaround that will surely works across all browsers, could be cached options list, used then to append into second select box.

var select_clone = $('#p-nhb option');

$('#p-city')  .change(function() {    $('#p-nhb').html(select_clone.filter('[data-val="' + this.value + '"]'));  })  .change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><select name="property_city" id="p-city">  <option class="button" value="new-york-city" selected>New York City</option>  <option class="button" value="">All</option>  <option class="button" value="dallas-tx">Dallas, TX</option>  <option class="button" value="las-vegas">Las Vegas, NV</option>  <option class="button" value="los-angeles">Los Angeles, CA</option>  <option class="button" value="miami">Miami, FL</option>  <option class="button" value="new-york-city">New York City, NY</option>  <option class="button" value="san-francisco">San Francisco, CA</option>  <option class="button" value="seattle-wa">Seattle, WA</option></select></p>
<p><select name="property_nhb[]" id="p-nhb" multiple>  <option class="button">All</option>  <option data-val="los-angeles" value="beverly-hills" >Beverly Hills</option>  <option data-val="los-angeles" value="santa-monica" >Santa Monica</option>  <option data-val="miami" value="hialea" >Hialea</option>  <option data-val="miami" value="little-havana">Little Havana</option>  <option data-val="miami" value="north-miami">North Miami</option>  <option data-val="miami" value="south-beach">South Beach</option>  <option data-val="new-york-city" value="chelsea">Chelsea</option>  <option data-val="new-york-city" value="harlem">Harlem</option>  <option data-val="new-york-city" value="noho">NoHo</option>  <option data-val="new-york-city" value="soho">SoHo</option></select></p>

style.display='none' doesn't work on option tags in chrome, but it does in firefox

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.

style.display not working in Chrome, Safari - Firefox, IE11 OK

You are probably running into issues as a result of putting the event listener on the individual <option> elements, rather than the <select> (browsers are VERY picky about what you can do with <option> elements).

Try binding a function to the onchange for the <select>, instead, and then, when the value changes, get the new value and trigger the correct function based on that.

Trying to use the code that you already have, you could do something like this:

<select name="class_chorus" size="1" onchange="toggleAccomponement(event);">
    <option value="">Any</option>
    <option value="Preschool">Early Childhood</option>
    <option value="Elementary">Elementary</option>
    <option value="Childrens Chorus">Children's Chorus</option>
</select>

. . . and then, in the <script> section:

function toggleAccomponement(event) {
    var sCurrSelection = event.target.value;

    if (sCurrSelection === "Childrens Chorus") {
        showAccomp();
    }
    else {
        hideAccomp();
    }
}

display:none doesn't work for option

See updated section

I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:

How to hide a <option> in a <select> menu with CSS?

In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.

UPDATE2:

In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.

<html><body>
    <select>
      <option disabled style="display:none">Hola</option>
      <option>Hello</option>
      <option>Ciao</option>
    </select>
</body></html>

Thanks to @achecopar for the help

---

Related Topics