Marcador de posición de la lista desplegable de selección de Bootstrap


104

Estoy intentando hacer una lista desplegable que contenga un marcador de posición. No parece ser compatible placeholder="stuff"como lo hacen otras formas. ¿Hay alguna forma diferente de obtener un marcador de posición en mi menú desplegable?

Respuestas:


225

Sí, simplemente "seleccionado desactivado" en la opción.

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Enlace al violín

También puede ver la respuesta en

https://stackoverflow.com/a/5859221/1225125


4
Esto no responde a la pregunta, ya que está pidiendo una solución incorporada de arranque
Mehdi

5
También puedes usar disabled selected hiddeno solo hiddentodos son correctos. :)
MD Ashik

60

Usar oculto:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

continúe con el último comentario, cuando use v-model, necesita usar esto: <option: value = "null" disabled hidden> Select Age </option>
Homer

16

dropdown or select no tiene un marcador de posición porque HTML no lo admite, pero es posible crear el mismo efecto para que se vea igual que el marcador de posición de otras entradas

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

si desea ver la primera opción en la lista, elimine la propiedad de visualización de css


8
Escribió una tonelada de código personalizado cuando agregar la clase "seleccionada deshabilitada" es lo mismo.
Jordan.JD

2
Para su crédito, el suyo es un poco más completo visualmente (con más código), donde el marcador de posición no se representa dentro de la selección de la lista. Aunque voy por el código mínimo de las cosas.
Roadkillnz

8

Si está inicializando el campo de selección a través de javascript, se puede agregar lo siguiente para reemplazar el texto del marcador de posición predeterminado

noneSelectedText: 'Insert Placeholder text'

ejemplo: si tiene:

<select class='picker'></select>

en su javascript, inicializa el selector de selección así

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

6

La mayoría de las opciones son problemáticas para la selección múltiple. Coloque el atributo Título y haga la primera opción como data-hidden = "true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

5

Agregar atributo oculto:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>


1
Esto funcionó mejor para mí, porque seleccionado significa que está seleccionado de forma predeterminada, deshabilitado para que no se pueda hacer clic en él y esté oculto en el menú desplegable. Supongo que si se usa oculto, probablemente no es necesario que deshabilitado esté allí.
aspergillusOryzae

4

Prueba esto:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

al usar required+ value="", el usuario no puede seleccionarlo usando hiddenlo ocultará de la lista de opciones, cuando el usuario abra el cuadro de opciones


¡muy recomendable!
Aqua 4,


2

Todas estas opciones son .... improvisaciones. Bootstrap ya ofrece una solución para esto. Si desea cambiar el marcador de posición para todos sus elementos desplegables, puede cambiar el valor de

noneSelectedText en el archivo de arranque.

Para cambiar individualmente, puede usar el parámetro TITLE.

ejemplo:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

Usted señor acaba de salvarme. Todas las opciones anteriores no funcionaban para la selección múltiple. Como la selección no estaba deseleccionando valores anteriores. El título funcionó para mí
Faran Khan

1
  1. en bootstrap-select.jsBuscar title: null, y eliminarlo.
  2. añadir title="YOUR TEXT"en el <select>elemento.
  3. Bien :)

Ejemplo:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

1

Creo que el cuadro desplegable con una clase y código JQuery para deshabilitar la primera opción para que el usuario seleccione, funcionará perfectamente como marcador de posición del cuadro de selección .

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Haga que la primera opción esté desactivada por JQuery.

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

Esto hará que la primera opción de Menú desplegable como marcador de posición y el usuario ya no pueda seleccionar la primera opción.

¡¡Espero eso ayude!!


0

Aquí hay otra forma de hacerlo

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

"Elegir plataforma" se convierte en el marcador de posición y la propiedad "requerida" asegura que el usuario tiene que seleccionar una de las opciones.

Muy útil cuando no desea utilizar nombres de campo o etiquetas.


0

Usando Bootstrap, esto es lo que puede hacer. Usando la clase "text-hide", la opción deshabilitada se mostrará al principio pero no en la lista.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

0

Bootstrap select tiene una noneSelectedTextopción. Puede configurarlo a través de data-none-selected-textatributo. Documentación .


0

Por .htmlpágina

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

para .jspo cualquier otra página de servlet.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

0

Usando bootstrap, si también necesita agregar algunos valores a la opción para usarlos para filtros u otras cosas, simplemente puede agregar la clase "bs-title-option" a la opción que desea como marcador de posición:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap agrega esta clase al titleatributo.


0

Solución para Angular 2

Crea una etiqueta en la parte superior de la selección

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

y aplicar CSS para colocarlo en la parte superior

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none le permite mostrar la selección cuando hace clic en la etiqueta, que se oculta cuando selecciona una opción.


0
<option value="" defaultValue disabled> Something </option>

puede reemplazar defaultValuecon selectedpero eso daría una advertencia.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.