Como esconder uma <option> em um menu <select> com CSS?

Percebi que o Chrome, ao que parece, não permite que eu me esconda <option>em um <select>. O Firefox vai.

Preciso ocultar os <option>s que correspondem aos critérios de pesquisa. Nas ferramentas da web do Chrome, posso ver que elas estão sendo definidas corretamente display: none;pelo meu JavaScript, mas uma vez que o <select>menu é clicado, elas são exibidas.

Como posso fazer com que esses <option>s que correspondem aos meus critérios de pesquisa NÃO sejam exibidos quando o menu for clicado? Obrigado!

Você deve implementar dois métodos de ocultação. display: nonefunciona para FF, mas não para Chrome ou IE. Portanto, o segundo método é envolver o <option>em a <span>com display: none. O FF não fará isso (HTML tecnicamente inválido, de acordo com as especificações), mas o Chrome e o IE farão e ocultarão a opção.

EDIT: Ah sim, já implementei isso no 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;" />' );
    }
};

EDIT 2: Veja como você usaria esta função:

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

EDIT 3: Adicionada verificação extra sugerida por @ user1521986

Para HTML5, você pode usar o atributo 'oculto'.

<option hidden>Hidden option</option>

É não suportado pelo IE <11. Mas se você só precisa de esconder alguns elementos, talvez seria melhor apenas para definir o atributo oculto em combinação com deficientes em comparação a adição / remoção de elementos ou não fazer semanticamente construções corretas.

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

Referência .

Eu sugeriria que você não use as soluções que usam um <span>invólucro porque não é um HTML válido, o que pode causar problemas no futuro. Acho que a solução preferida é realmente remover todas as opções que você deseja ocultar e restaurá-las conforme necessário. Usando jQuery, você só precisará dessas 3 funções:

A primeira função salvará o conteúdo original da seleção . Por segurança, convém chamar essa função ao carregar a página.

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

A próxima função chama a função acima para garantir que o conteúdo original foi salvo e, em seguida, simplesmente remove as opções do DOM.

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

A última função pode ser usada sempre que você quiser "redefinir" para todas as opções originais.

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

Observe que todas essas funções esperam que você esteja passando elementos jQuery. Por exemplo:

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

Aqui está um exemplo prático : http://jsfiddle.net/9CYjy/23/

A resposta de Ryan P deve ser alterada para:

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

Caso contrário, ele fica embrulhado em muitas tags

A função toggleOption não é perfeita e introduziu bugs desagradáveis ​​em meu aplicativo. jQuery vai se confundir com .val () e .arraySerialize () Tente selecionar as opções 4 e 5 para ver o que quero dizer:

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

Selecionar entradas são complicadas dessa forma. Que tal desativá-lo, isso funcionará em todos os navegadores:

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

Isso desativará todos os outros <option>elementos, mas você pode selecionar qualquer um que desejar.

Aqui está uma demonstração: http://jsfiddle.net/jYWrH/

Nota: Se você deseja remover a propriedade disabled de um elemento, você pode usar .removeProp('disabled').

Atualizar

Você pode salvar os <option>elementos que deseja ocultar no elemento de seleção oculto:

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

Você pode então adicionar os <option>elementos de volta ao elemento de seleção original:

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

Nestes dois exemplos, espera-se que o elemento select visível tenha o id de visiblee o elemento select oculto tenha o id hidden.

Aqui está uma demonstração: http://jsfiddle.net/jYWrH/1/

Observe que .on()é novo no jQuery 1.7 e o uso para esta resposta é o mesmo que .bind(): http://api.jquery.com/on

Resposta simples: você não pode. Os elementos do formulário têm recursos de estilo muito limitados.

A melhor alternativa seria definir disabled=truea opção (e talvez uma cor cinza, já que apenas o IE faz isso automaticamente), e isso tornará a opção impossível de clicar.

Como alternativa, se você puder, remova completamente o optionelemento.

// Simplest way

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

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

Como já está usando JS, você pode criar um elemento SELECT oculto na página e, para cada item que está tentando ocultar nessa lista, mova-o para a lista oculta. Dessa forma, eles podem ser facilmente restaurados.

Não sei como fazer isso em CSS puro ... Eu teria pensado que o truque display: none teria funcionado.

!!! AVISO !!!

Substitua o segundo "IF" por "WHILE" ou não funciona!

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

Você deve removê-los do <select>usando JavaScript. Essa é a única maneira garantida de fazê-los ir embora.

este parece funcionar para mim no cromo

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

Atrasado para o jogo, mas a maioria parece bastante complicada.

Veja como eu fiz:

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

});

marcação de select-1:

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

marcação de select-2:

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