'CSS - Hide Options From Select Menu on iPhone & Safari

So I have a site that is using a select menu for the mobile navigation. I'm needing to hide a few options from the list, and have been able to so on all browsers and devices except for Safari and iPhone.

Here's the css I used to remove items 7-11 on the list:

select.select-menu option:nth-child(n+7):nth-child(-n+11){
display: none !important;}

This is working as expected in Chrome and on my android phone. However, when you view the site in Safari or on an iPhone the options are not hidden and still show up.

I've tried several options and done a lot of research on the matter and can't find a solution. I tried removing items from the list using jQuery and couldn't get that to work either.

Is there a way I can hide the options on iPhone and Safari as well?

EDIT:

Here's a fiddle: https://jsfiddle.net/cv6rubua/3/

htmlcssiphonewordpress


Solution 1:[1]

Only this works for me - wrap in element you need to hide it. "if-check" for not wrapping it twice if hiding connected with some action on page.

Hide for iOS with jQuery:

if( !($(this).parent().is('span')) ) $(this).wrap('<span>');

Unhide for iOS with jQuery:

if( ($(this).parent().is('span')) ) $(this).unwrap();

Solution 2:[2]

I also had difficulties in Safari while trying to hide option in my select (from an extension) and decided to go this route.

To "hide" the option in my select I replace the option with div, and then back again to option if I want to show it again.

//if any div exists change back to option
function showAll(){
var nodesSnapshot = document.evaluate("//select/div", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('option');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option that contain text with div
function hideSome(){
var nodesSnapshot = document.evaluate("//select/option[text()[contains(.,'HideMe')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option with div
function hideAll(){
var nodesSnapshot = document.evaluate("//select/option", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
<button onclick="showAll();">showAll</button>
<button onclick="hideSome();">hideSome</button>
<button onclick="hideAll();">hideAll</button>


<select>
<option>HideMe</option>
<option>HideMe</option>
<option>ShowMe</option>
<option>HideMe</option>
<option>ShowMe</option>
</select>

Solution 3:[3]

With Jquery you can use prop("disabled", true) together with hide(). Like this:

$(this).prop("disabled", true); // for safari
$(this).hide();

This way options will be hidden in most browsers. In Safari they will be visible but disabled.

I think this is a nice alternative.

Solution 4:[4]

I found that removing the items rather than hiding them is easier.

$(this).remove();

Solution 5:[5]

You can solve this using JavaScript

var selectOption = document.querySelectorAll('.select-menu option');

for (var i = 0; i < selectOption.length; i++) {
  var item = selectOption[i];
  if (item.innerHTML.charAt(0) === "–") {
    item.remove();
  };
}

Solution 6:[6]

You have a number of options depending on what you want, from I have found display: none does not work on safari so here is an alternative method:

You can simply make it super small and invisible:

opacity: 0;
height: 0;
width: 0;
overflow: hidden;

This should work well, and should be supported by both chrome and safari!

Good luck!

Solution 7:[7]

You can't. Safari uses an overlay for dropdowns... You literally have to remove them.... There is a hack using spans as non-valid syntax... Wouldn't recommend using invalid syntax though

Solution 8:[8]

The solution that worked for me was to create another hidden select which all the options, and clone the relevant ones to the visible select. this way you display one the options you want to display but still keep a record of the other options in a hidden list.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stan Fad
Solution 2 Robin Oberg
Solution 3 soliver
Solution 4 Anytech
Solution 5
Solution 6 Trevor Clarke
Solution 7 Andres Gallo
Solution 8 yonidebest

Related Questions