¿Cómo ocultar una <opción> en un menú <seleccionar> con CSS?

Me di cuenta de que Chrome, al parecer, no me permitirá esconderme <option>en un <select>. Firefox lo hará.

Necesito ocultar los mensajes de correo <option>electrónico que coinciden con un criterio de búsqueda. En las herramientas web de Chrome puedo ver que display: none;mi JavaScript las está configurando correctamente , pero una vez que <select>se hace clic en el menú, se muestran.

¿Cómo puedo hacer que estos <option>mensajes de correo electrónico que coinciden con mis criterios de búsqueda NO se muestren cuando se hace clic en el menú? ¡Gracias!

Tienes que implementar dos métodos para esconderte. display: nonefunciona para FF, pero no para Chrome o IE. Entonces, el segundo método es envolver el <option>en un <span>condisplay: none . FF no lo hará (HTML técnicamente no válido, según la especificación) pero Chrome e IE lo harán y ocultará la opción.

EDITAR: Oh sí, ya implementé esto en 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;" />' );
    }
};

EDITAR 2: Así es como usaría esta función:

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

EDITAR 3: Se agregó una verificación adicional sugerida por @ user1521986

Para HTML5, puede utilizar el atributo 'oculto'.

<option hidden>Hidden option</option>

Se no soportado por el IE <11. Pero si sólo se necesita para ocultar algunos elementos, tal vez sería mejor simplemente establecer el atributo oculto en combinación con personas con discapacidad en comparación con la adición / eliminación de elementos o no hacer construcciones semánticamente correctas.

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

Referencia .

Sugeriría que no use las soluciones que usan un <span>contenedor porque no es HTML válido, lo que podría causar problemas en el futuro. Creo que la solución preferida es eliminar las opciones que desee ocultar y restaurarlas según sea necesario. Con jQuery, solo necesitará estas 3 funciones:

La primera función guardará el contenido original de la selección . Para estar seguro, es posible que desee llamar a esta función cuando cargue la 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
}

Esta siguiente función llama a la función anterior para asegurarse de que el contenido original se haya guardado y luego simplemente elimina las opciones del DOM.

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

La última función se puede utilizar siempre que desee "restablecer" todas las opciones originales.

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

Tenga en cuenta que todas estas funciones esperan que esté pasando elementos de jQuery. Por ejemplo:

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

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/9CYjy/23/

La respuesta de Ryan P debe cambiarse a:

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

De lo contrario, se envuelve en demasiadas etiquetas.

La función toggleOption no es perfecta e introdujo errores desagradables en mi aplicación. jQuery se confundirá con .val () y .arraySerialize () Intente seleccionar las opciones 4 y 5 para ver lo que quiero decir:

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

Las entradas seleccionadas son complicadas de esta manera. ¿Qué hay de deshabilitarlo en su lugar? Esto funcionará en todos los navegadores:

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

Esto desactivará todos los demás <option> elementos, pero puede seleccionar el que desee.

Aquí hay una demostración: http://jsfiddle.net/jYWrH/

Nota: Si desea eliminar la propiedad deshabilitada de un elemento, puede usar .removeProp('disabled').

Actualizar

Puede guardar los <option>elementos que desea ocultar en el elemento de selección oculto:

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

Luego, puede volver a agregar los <option>elementos al elemento seleccionado original:

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

En estos dos ejemplos, se espera que el elemento de selección visible tenga la identificación de visibley el elemento de selección oculto tenga la identificación de hidden.

Aquí hay una demostración: http://jsfiddle.net/jYWrH/1/

Tenga en cuenta que .on()es nuevo en jQuery 1.7 y el uso de esta respuesta es el mismo que .bind(): http://api.jquery.com/on

Respuesta simple: no puedes. Los elementos de formulario tienen capacidades de estilo muy limitadas.

La mejor alternativa sería establecer disabled=truela opción (y tal vez un color gris, ya que solo IE lo hace automáticamente), y esto hará que no se pueda hacer clic en la opción.

Alternativamente, si puede, elimine completamente el 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 ya está utilizando JS, puede crear un elemento SELECT oculto en la página y, para cada elemento que intente ocultar en esa lista, muévalo a la lista oculta. De esta manera, se pueden restaurar fácilmente.

No sé cómo hacerlo en CSS puro ... Hubiera pensado que la pantalla: ningún truco habría funcionado.

!!! ADVERTENCIA !!!

Reemplace el segundo "SI" por "MIENTRAS" o no 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;" />' );
    }
};

Debe eliminarlos del <select>uso de JavaScript. Esa es la única forma garantizada de hacer que desaparezcan.

este parece funcionar para mí en Chrome

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

Tarde para el juego, pero la mayoría de estos parecen bastante complicados.

Así es como lo hice:

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

});

marcado de select-1:

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

marcado de select-2:

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