CSS로 <select> 메뉴에서 <option>을 숨기는 방법은 무엇입니까?

Chrome <option>이 <select>. Firefox는 할 것입니다.

<option>검색 기준과 일치 하는를 숨겨야 합니다. Chrome 웹 도구에서 display: none;JavaScript 에 의해 올바르게 설정되고 있음을 알 수 있지만 <select>메뉴를 클릭하면 표시됩니다.

<option>메뉴를 클릭 할 때 내 검색 기준과 일치 하는 이러한 항목이 표시되지 않도록하려면 어떻게해야합니까? 감사!

은폐를 위해 두 가지 방법을 구현해야합니다. display: noneFF에서는 작동하지만 Chrome 또는 IE에서는 작동하지 않습니다. 따라서 두 번째 방법은 배치되는 <option>A의을 <span>와 display: none. FF는이를 수행하지 않지만 (사양에 따라 기술적으로 잘못된 HTML) Chrome과 IE는 옵션을 숨 깁니다.

편집 : 오 예, 이미 jQuery에서 구현했습니다.

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

편집 2 :이 기능을 사용하는 방법은 다음과 같습니다.

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

편집 3 : @ user1521986이 제안한 추가 검사 추가

HTML5의 경우 'hidden'속성을 사용할 수 있습니다.

<option hidden>Hidden option</option>

그것은되어 있지 IE <(11)에 의해 지원하지만 경우에 당신은 어쩌면 / 추가 요소를 제거하거나 의미 정확한 구조를 안하고 비교하여 더 나은 장애인과 함께 단지 설정 숨김 속성을하는 것, 몇 가지 요소를 숨길하기 만하면됩니다.

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

참조 .

래퍼 를 사용하는 솔루션 은 유효한 HTML이 아니기 때문에 사용 하지 않는 것이 좋습니다 <span>. 선호하는 해결책은 숨기려는 옵션을 실제로 제거하고 필요에 따라 복원하는 것입니다. jQuery를 사용하면 다음 세 가지 기능 만 필요합니다.

첫 번째 기능은 선택 의 원래 내용을 저장합니다 . 안전을 위해 페이지를로드 할 때이 함수를 호출 할 수 있습니다.

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

이 다음 함수는 위의 함수를 호출하여 원본 콘텐츠가 저장되었는지 확인한 다음 단순히 DOM에서 옵션을 제거합니다.

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
 }

마지막 기능은 모든 원래 옵션으로 "재설정"할 때마다 사용할 수 있습니다.

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

이 모든 함수는 jQuery 요소를 전달한다고 예상합니다. 예를 들면 :

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

다음은 작동하는 예입니다. http://jsfiddle.net/9CYjy/23/

Ryan P의 대답은 다음과 같이 변경해야합니다.

    jQuery.fn.toggleOption = function (show) {
        $(this).toggle(show);
        if (show) {
            if ($(this).parent('span.toggleOption').length)
                $(this).unwrap();
        } else {
            **if ($(this).parent('span.toggleOption').length==0)**
                $(this).wrap('<span class="toggleOption" style="display: none;" />');
        }
    };

그렇지 않으면 너무 많은 태그로 래핑됩니다.

toggleOption 함수는 완벽하지 않으며 내 응용 프로그램에 불쾌한 버그가 발생했습니다. jQuery는 .val () 및 .arraySerialize ()와 혼동 될 것입니다. 내가 의미하는 바를 확인하려면 옵션 4와 5를 선택하십시오.

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

$("#o3").toggleOption(false); 
$("#t").change(function(e) {
    if($(this).val() != this.value) {
    console.log("Error values not equal", this.value, $(this).val());
    }
});
</script>

선택 입력은 이런 방식으로 까다 롭습니다. 대신 비활성화하면 크로스 브라우저에서 작동합니다.

$('select').children(':nth-child(even)').prop('disabled', true);

이렇게하면 다른 모든 <option>요소 가 비활성화 되지만 원하는 요소를 선택할 수 있습니다.

다음은 데모입니다. http://jsfiddle.net/jYWrH/

참고 : 요소의 비활성화 된 속성을 제거하려면을 사용할 수 있습니다 .removeProp('disabled').

최신 정보

<option>숨길 요소를 숨겨진 선택 요소에 저장할 수 있습니다.

$('#visible').on('change', function () {
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
});

그런 다음 <option>원래 선택 요소에 요소를 다시 추가 할 수 있습니다 .

$('#hidden').children().appendTo('#visible');

이 두 예제에서 보이는 선택 요소의 ID는 visible이고 숨겨진 선택 요소의 ID는 hidden입니다.

다음은 데모입니다. http://jsfiddle.net/jYWrH/1/

참고 .on()jQuery를 1.7과이 답변에 대한 사용의 새로운 같이 동일 .bind(): http://api.jquery.com/on

간단한 대답 : 할 수 없습니다. 양식 요소에는 매우 제한된 스타일 지정 기능이 있습니다.

가장 좋은 대안은 disabled=true옵션 을 설정 하는 것입니다 (그리고 IE 만 자동으로 수행하므로 회색 색상 일 수도 있음). 그러면 옵션을 클릭 할 수 없게됩니다.

또는 가능하면 option요소를 완전히 제거하십시오 .

// Simplest way

var originalContent = $('select').html();

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});

이미 JS를 사용하고 있으므로 페이지에 숨겨진 SELECT 요소를 만들고 해당 목록에서 숨기려는 각 항목에 대해 숨겨진 목록으로 이동할 수 있습니다. 이렇게하면 쉽게 복원 할 수 있습니다.

순수한 CSS로하는 방법을 모르겠습니다. display : none 트릭이 효과가있을 것이라고 생각했을 것입니다.

!!! 경고 !!!

두 번째 "IF"를 "WHILE"로 바꾸거나 작동하지 않습니다!

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        while( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

<select>JavaScript 사용 에서 제거해야합니다 . 그것이 그들을 사라지게하는 유일한 보장 된 방법입니다.

이것은 크롬에서 나를 위해 작동하는 것 같습니다.

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

게임이 늦었지만 대부분은 상당히 복잡해 보입니다.

내가 한 방법은 다음과 같습니다.

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) {

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) {
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    }

});

select-1의 마크 업 :

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

select-2의 마크 업 :

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>