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

래퍼 를 사용하는 솔루션 은 유효한 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/

답변

    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;" />');
        }
    };

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

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

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