CSS - Hide Options From Select Menu on iPhone & Safari

user_1755424 0
Viewed 23670

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/

wordpress css iphone html
8 Answers

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.

user_115274250

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>

user_103989910

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

$(this).remove();
user_12387970

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();
  };
}
user_37137560
Related