CSS - Hide Options From Select Menu on iPhone & Safari
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();
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 optionfunction 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 divfunction 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 divfunction 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>