html - por - lista desplegable excel mac

Selección de HTML: ¿cómo configurar el texto predeterminado que no se mostrará en la lista desplegable?

Question

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

Answer 1

Aquí está la solución:

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

Answer 2

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

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

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

Espero que eso ayude.

Answer 3

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

• Agregue un elemento de option como el primer elemento secundario de la select
• Establecer el value = "" para esa option
• Establecer el texto del marcador de posición como el contenido de esa option
• Agregue el atributo required a la select

Esto obligará al usuario a seleccionar otra opción para poder enviar el formulario, y los navegadores deberían render la option como se 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 presente 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 representarán como una option normal. Así que tendremos que arreglarlo manualmente, agregando lo siguiente a la option :

• El atributo selected , para que sea selected por defecto
• El atributo disabled , 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>

Answer 4

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

Answer 5

Tengo una solución con un lapso que se muestra arriba de la selección hasta que se hace una selección. El lapso muestra el mensaje predeterminado, por lo que no está en la lista de proposiciones:

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

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

Answer 6

La solución de Kyle funcionó perfectamente bien para mí, así que hice mi investigación para evitar cualquier Js y CSS, pero solo quedándome con HTML. Agregar un valor de selected al elemento que queremos que aparezca como un encabezado lo fuerza a mostrarlo en primer lugar como un marcador de posición. Algo como:

<option selected disabled>Choose here</option>

El marcado completo debe estar en esta línea:

<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 echarle un vistazo a este fiddle , y aquí está el resultado:

Si no desea que el tipo de texto de marcador de posición aparezca en la lista de opciones una vez que el usuario haga clic en el cuadro de selección, simplemente agregue el atributo hidden manera:

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

Answer 7

<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 botón esc para seleccionar de nuevo el deshabilitado. A diferencia de las otras respuestas similares, pongo value="" , esto es así si envía el valor (s) 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.