CSS - 아이폰 및 Safari의 선택 메뉴에서 옵션 숨기기

CSS - 아이폰 및 Safari의 선택 메뉴에서 옵션 숨기기

그래서 모바일 내비게이션에 선택 메뉴를 사용하고 있는 사이트가 있습니다.목록에서 몇 가지 옵션을 숨길 필요가 있으며, Safari와 iPhone을 제외한 모든 브라우저와 기기에서 옵션을 숨길 수 있습니다.

목록에서 항목 7-11을 삭제하는 데 사용한 css는 다음과 같습니다.

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

이것은 Chrome과 Android 폰에서 예상대로 동작하고 있습니다.그러나 Safari 또는 iPhone에서 사이트를 볼 때 옵션은 숨겨지지 않고 계속 표시됩니다.

저는 그 문제에 대해 여러 가지 방법을 시도하고 많은 조사를 해봤지만 해결책을 찾을 수 없습니다.jQuery를 사용하여 목록에서 아이템을 삭제하려고 했지만 그것도 작동하지 않았습니다.

iPhone이나 Safari에서도 옵션을 숨길 수 있는 방법이 있나요?

편집:

여기 바이올린이 있습니다.https://jsfiddle.net/cv6rubua/3/

이 방법만 사용할 수 있습니다. 숨겨야 하는 요소로 싸매십시오.페이지에서 일부 작업과 연결된 경우 "if-check"를 선택하면 두 번 래핑되지 않습니다.

jQuery를 사용하여 iOS용 숨기기:

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

jQuery를 사용하여 iOS용 숨김 해제:

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

Jquery를 사용하면prop("disabled", true)와 함께hide(). 이렇게.

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

이 방법은 대부분의 브라우저에서 숨겨집니다.Safari에서는 표시되지만 비활성화됩니다.

나는 이것이 좋은 대안이라고 생각한다.

Safari에서도 (내선번호에서) 옵션을 숨기려다 문제가 생겨 이 루트를 선택하게 되었습니다.

선택 항목에서 옵션을 "숨기기" 위해 옵션을 div로 바꾼 다음 다시 표시하려면 다시 옵션으로 돌아갑니다.

//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>

물건을 숨기는 것보다 삭제하는 것이 더 쉽다는 것을 알았습니다.

$(this).remove();

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

원하는 것에 따라 여러 가지 옵션이 있습니다.display: none는 safari에서는 동작하지 않기 때문에 대체 방법을 다음에 나타냅니다.

매우 작고 투명하게 만들 수 있습니다.

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

이 기능은 크롬과 사파리에서 모두 지원되어야 합니다!

행운을 빕니다.

그럴수는 없어요.Safari는 드롭다운에 오버레이를 사용합니다...말 그대로 제거해야 합니다.잘못된 구문으로 스팬을 사용하는 해킹이 있습니다...그러나 잘못된 구문을 사용하는 것은 권장하지 않습니다.

제게 효과가 있었던 솔루션은 모든 옵션이 숨겨진 다른 선택 항목을 만들고 관련 선택 항목을 보이는 선택 항목으로 복제하는 것이었습니다.이렇게 하면 표시할 옵션 중 하나를 표시하지만 다른 옵션에 대한 기록은 숨김 목록에 유지할 수 있습니다.

언급URL : https://stackoverflow.com/questions/36066953/css-hide-options-from-select-menu-on-iphone-safari