Texto predeterminado que no se mostrará en la lista desplegable

Tengo un selectque inicialmente muestra Seleccionar idioma hasta que el usuario selecciona un idioma. Cuando el usuario abre la selección, no quiero que se muestre la opción Seleccionar idioma , porque no es una opción real.

¿Cómo puedo conseguir esto?

La solución de Kyle funcionó perfectamente bien para mí, así que hice mi investigación para evitar cualquier J y CSS, pero solo me quedé con HTML. Agregar un valor de selectedal elemento que queremos que aparezca como encabezado obliga a que se muestre en primer lugar como un marcador de posición. Algo como:

<option selected disabled>Choose here</option>

El marcado completo debe estar en estas líneas:

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Puedes echar un vistazo a este violín y aquí tienes el resultado:

Si no desea que el tipo de texto de marcador de posición aparezca en las opciones una vez que el usuario haga clic en el cuadro de selección, simplemente agregue el hiddenatributo así:

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Compruebe el violín aquí y la captura de pantalla a continuación.

Esta es la solucion:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

La forma correcta y semántica es usar una opción de etiqueta de marcador de posición :

• Agregue un optionelemento como primer hijo delselect
• Establecer a esovalue= ""option
• Establecer el texto del marcador de posición como el contenido de ese option
• Agregue el requiredatributo alselect

Esto obligará al usuario a seleccionar otra opción para poder enviar el formulario, y los navegadores deben representar el formulario optioncomo desee:

Si un elemento de selección contiene una opción de etiqueta de marcador de posición, se espera que el agente de usuario represente esa opción de una manera que transmita que es una etiqueta, en lugar de una opción válida del control.

Sin embargo, la mayoría de los navegadores lo mostrarán como normal option. Así que tendremos que arreglarlo manualmente, agregando lo siguiente a option:

• El selectedatributo, para hacerlo seleccionado por defecto
• El disabledatributo, para que el usuario no pueda seleccionarlo.
• display: none, para ocultarlo de la lista de valores

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Debido a que no puede usar asignar marcadores de posición para las selectetiquetas, no creo que haya ninguna forma de hacer exactamente lo que está pidiendo con HTML / CSS puro. Sin embargo, puede hacer algo como esto:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

"Seleccionar idioma" aparecerá en el menú desplegable, pero una vez que se seleccione otra opción, no será posible volver a seleccionarla.

Espero que eso ayude.

Prueba esto:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

En el CSS:

.selectSelection option:first-child{
    display:none;
}

Tengo una solución con un intervalo que se muestra sobre la selección hasta que se realiza una selección. El intervalo muestra el mensaje predeterminado, por lo que no está en la lista de propuestas:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (con JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

Hice un jsfiddle para demostración . Probado con Firefox e IE8.

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

por supuesto, puede mover el css a un archivo css si lo desea, y poner un script para capturar el escbotón y seleccionar el deshabilitado nuevamente. A diferencia de las otras respuestas similares que puse value="", esto es así que si envía los valores de su lista de selección con un formulario, no contendrá "eligió algo". En asp.net mvc 5 enviado como json compilado con var obj = { prop:$('#ddl').val(),...};y JSON.stringify(obj);el valor de prop será nulo.

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​