CSS - Hide Options from Select Menu on iPhone & Safari

$( #id option ).hide(); not working on safari/chrome?

To hide:

var myOpts = $("#id option").detach();

To show:

$("#id option").append(myOpts);

As opposed to .remove(), .detach() keeps all jQuery data associated with the removed elements.

JQuery show/hide issue using Select (Dropdown) on IOS Safari

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>function showonlyone(thechosenone) {

  $('.hidebox').each(function(index) {

    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}</script>

Use attr for getting attribute values.

<div id="selection">
  <select class="form-control" onchange="showonlyone(this.value)">
      <option value="newboxes1">Option 1</option>
      <option value="newboxes2">Option 2</option>
      <option value="newboxes3">Option 3</option>
      <option value="newboxes4">Option 4</option>
  </select>
</div>

<div id="container" style="margin-top:20px">
  <div class="hidebox showbox" id="newboxes1">Selected 1</div>
  <div class="hidebox" id="newboxes2">Selected 2</div>
  <div class="hidebox" id="newboxes3">Selected 3</div>
  <div class="hidebox" id="newboxes4">Selected 4</div>
</div>

use onchange in select tag rather than using click for options.

Dynamic hide select list on safari

Rather than using JQuery to hide the dropdown list after the user's selected it, you can disable the dropdown list and attach the click handler to the parent DIV instead. Setting a pointer-events: none style on the select element will prevent that element from responding to any click events. You can then attach the click handler to .customSelect:

$('.customSelect').on('click.selectList', function(e) {
  e.stopPropagation();
  if($("#listeSecteurs").css("display") === "none")
    $("#listeSecteurs").css("display","");
  else
    $("#listeSecteurs").css("display","none");
});

When the user clicks the .customSelect DIV, you'll toggle whether or not #listeSecteurs is displayed. When the user clicks on anything other than #listSecteurs, you want to get rid of #listSecteurs, so you attach a click handler to window to do this:

$(window).on('click.selectListWindow', function(e) {
      $("#listeSecteurs").css({"display":"none"});
});

Note that e.stopPropagation() in the .customSelect handler will prevent this window click handler from being triggered when the .customSelect div is clicked. You also need to stop click events from propagating from .hideableSelectList to window, because when the user clicks the former, you want to keep #listSecteurs displayed.

$('.hideableSelectList').on('click.selectList', function(e) {
  e.stopPropagation();
});

Putting it all together:

<html>

  <head>

  <style>

  .customSelect{

    width: calc(100% - 2px);

    background-color: white; 

    border: solid 1px #AAAAAA;

    border-top-width: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;            

}     

.customSelect select{

    width: 100%; 

    padding: 5px 8px;

    border: 0px;        

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    overflow:hidden; 

}

.customSelect select.collapse{

    background: transparent url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat; 

    background-size: 10px;

    background-position: right 10px center;

}

.customSelect select.expanded{

    background: transparent url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-128.png') no-repeat; 

    background-size: 10px;

    background-position: right 10px center;

}

.hideableSelectList{

    position: relative;    

}

.hideableSelectList div{

    background-color: white;

    max-height: 300px;

    width: 250px;

    overflow-y: auto;

    overflow-x: hidden;

    position: absolute;

    padding: 0px 10px;

    border: solid 1px #C0C0C0;

    z-index: 3;

}

  </style>

  </head>

  <body>

  <div class="customSelect" style="width: 195px;">

    <select class="collapse" style="width: 195px; z-index: 0; pointer-events: none" >

        <option style="height: 0px">- Select your options -</option>

    </select><br>

    <div class="hideableSelectList" style="z-index: 10;">

        <div id="listeSecteurs" style="display: none; left: 0px;">

          <ul style="list-style-type: none;">

            <li><input type="checkbox">val 1</li>

            <li><input type="checkbox">val 2</li>

            <li><input type="checkbox">val 3</li>

            <li><input type="checkbox">val 4</li>

            <li><input type="checkbox">val 5</li>

          </ul>

        </div>

    </div>

</div>

  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>

  $(function () {

    $('.hideableSelectList').on('click.selectList', function(e) {

      e.stopPropagation();

    });

    $('.customSelect').on('click.selectList', function(e) {

      e.stopPropagation();

      if($("#listeSecteurs").css("display") === "none")

        $("#listeSecteurs").css("display","");

      else

        $("#listeSecteurs").css("display","none");

    });

    $(window).on('click.selectListWindow', function(e) {

          $("#listeSecteurs").css({"display":"none"});

    });

  });

  </script>

</html>

How can I remove the gloss on a select element in Safari on Mac?

@beanland; You have to write

-webkit-appearance:none;

in your css.

read this http://trentwalton.com/2010/07/14/css-webkit-appearance/

Disable select option in IOS Safari

There is no alternative but to remove the disabled options when developing for iOS.

For iPhone the picture is very clear: all select list are styled as click wheels in all circumstances, and these wheels do not accept disabled options. This is shown in the iPhone Simulator as well as on the actual iPhone.

For iPad, the picture is more confusing. The iPad simulator does grey out the disabled options and really makes them disabled, just as mobile Safari and desktop Safari do. But an actual iPad (iPad 1, running iOS 4.2.1, in my case) will show you the click wheel.

So do something like this early on in your script:

// check for ios device
nP = navigator.platform;      
if (nP == "iPad" || nP == "iPhone" || nP == "iPod" || nP == "iPhone Simulator" || nP == "iPad Simulator"){
    $('select option[disabled]').remove();
}

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!