Jak ukryć <opcję> w menu <select> za pomocą CSS?

Zdałem sobie sprawę, że wydaje się, że Chrome nie pozwoli mi ukryć się <option>w pliku <select>. Firefox to zrobi.

Muszę ukryć te, <option>które pasują do kryteriów wyszukiwania. W narzędziach internetowych Chrome widzę, że są one poprawnie ustawiane display: none;przez mój JavaScript, ale po <select>kliknięciu menu są wyświetlane.

Jak mogę sprawić, aby te, <option>które pasują do moich kryteriów wyszukiwania, NIE były wyświetlane po kliknięciu menu? Dzięki!

Musisz zaimplementować dwie metody ukrywania. display: nonedziała dla FF, ale nie Chrome czy IE. Więc drugą metodą jest zawijanie <option>w a <span>with display: none. FF tego nie zrobi (technicznie nieprawidłowy HTML, zgodnie ze specyfikacją), ale Chrome i IE to zrobią i ukryją opcję.

EDYCJA: O tak, już to zaimplementowałem w 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;" />' );
    }
};

EDYCJA 2: Oto jak możesz użyć tej funkcji:

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

EDYCJA 3: Dodano dodatkowe sprawdzenie sugerowane przez @ user1521986

W przypadku HTML5 możesz użyć atrybutu „ukryty”.

<option hidden>Hidden option</option>

To jest nie obsługiwane przez IE <11. Ale jeśli potrzebujesz tylko ukryć kilka elementów, może byłoby lepiej po prostu ustawić atrybut ukryty w połączeniu z przyjaznym niepełnosprawnym w porównaniu do dodawania / usuwania elementów lub nie robi semantycznie poprawne konstrukcje.

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

Odniesienie .

Sugerowałbym, abyś nie korzystał z rozwiązań wykorzystujących rozszerzenie<span> opakowanie, ponieważ nie jest to prawidłowy HTML, co może powodować problemy w . Myślę, że preferowanym rozwiązaniem jest faktycznie usunięcie wszystkich opcji, które chcesz ukryć, i przywrócenie ich w razie potrzeby. Korzystając z jQuery, będziesz potrzebować tylko tych 3 funkcji:

Pierwsza funkcja zapisze oryginalną zawartość pliku zaznaczenia . Dla pewności możesz chcieć wywołać tę funkcję podczas ładowania strony.

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

Ta następna funkcja wywołuje powyższą funkcję, aby upewnić się, że oryginalna zawartość została zapisana, a następnie po prostu usuwa opcje z DOM.

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

Ostatnia funkcja może być używana, gdy chcesz „zresetować” z powrotem do wszystkich oryginalnych opcji.

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

Zauważ, że wszystkie te funkcje oczekują, że przekazujesz elementy jQuery. Na przykład:

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

Oto działający przykład: http://jsfiddle.net/9CYjy/23/

Odpowiedź Ryana P powinna zostać zmieniona na:

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

W przeciwnym razie zostanie opakowany w zbyt wiele tagów

Funkcja toggleOption nie jest doskonała i wprowadziła nieprzyjemne błędy w mojej aplikacji. jQuery będzie mylony z .val () i .arraySerialize () Spróbuj wybrać opcje 4 i 5, aby zobaczyć, o co mi chodzi:

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

W ten sposób wybieranie danych wejściowych jest trudne. A co z wyłączeniem go zamiast tego, zadziała to w różnych przeglądarkach:

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

Spowoduje to wyłączenie wszystkich <option> elementów, ale możesz wybrać dowolny, który chcesz.

Oto demo: http://jsfiddle.net/jYWrH/

Uwaga: Jeśli chcesz usunąć wyłączoną właściwość elementu, możesz użyć .removeProp('disabled').

Aktualizacja

Możesz zapisać <option>elementy, które chcesz ukryć w ukrytym elemencie wyboru:

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

Następnie możesz dodać <option>elementy z powrotem do oryginalnego elementu select:

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

W tych dwóch przykładach oczekuje się, że widoczny element select ma identyfikator, visiblea ukryty element select ma identyfikator hidden.

Oto demo: http://jsfiddle.net/jYWrH/1/

Zauważ, że .on()jest to nowość w jQuery 1.7, a użycie tej odpowiedzi jest takie samo, jak .bind(): http://api.jquery.com/on

Prosta odpowiedź: nie możesz. Elementy formy mają bardzo ograniczone możliwości stylizacji.

Najlepszą alternatywą byłoby ustawienie disabled=true opcji (i być może szarego koloru, ponieważ tylko IE robi to automatycznie), co spowoduje, że opcja będzie niemożliwa do kliknięcia.

Alternatywnie, jeśli możesz, całkowicie usuń optionelement.

// Simplest way

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

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

Ponieważ używasz już JS, możesz utworzyć ukryty element SELECT na stronie i dla każdego elementu, który próbujesz ukryć na tej liście, przenieść go na listę ukrytą. W ten sposób można je łatwo przywrócić.

Nie znam sposobu na zrobienie tego w czystym CSS ... Myślałem, że display: żadna sztuczka by nie zadziałała.

!!! OSTRZEŻENIE !!!

Zamień drugie „JEŚLI” na „GDY” lub nie działa!

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

Powinieneś je usunąć z <select>using JavaScript. To jedyny gwarantowany sposób, aby odejść.

ten wydaje się działać dla mnie w chrome

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

Spóźniona gra, ale większość z nich wydaje się dość skomplikowana.

Oto jak to zrobiłem:

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

});

znaczniki select-1:

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

znaczniki select-2:

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