html - puedo - Bootstrap selecciona el marcador de posición de la lista desplegable

lista desplegable html5

Question

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

Answer 1

1. en bootstrap-select.js Buscar title: null, y eliminarlo.
2. agregue title="YOUR TEXT" en el elemento <select> .
3. Bien :)

Ejemplo:

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

Answer 2

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>

Answer 3

Aquí hay otra manera 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" garantiza que el usuario tenga que seleccionar una de las opciones.

Muy útil, cuando no quiere usar nombres de campo o etiquetas.

Answer 4

Bootstrap select tiene una opción noneSelectedText . Puede establecerlo a través del atributo de data-none-selected-text . Documentation .

Answer 5

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

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

Deshabilite la primera opción mediante JQuery.

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

Esto hará que la primera opción de Dropdown como Marcador de posición y el usuario ya no podrán seleccionar la primera opción.

¡¡Espero eso ayude!!

Answer 6

Para la página .html

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

para .jsp o 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>

Answer 7

Prueba esto:

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

cuando se usa required + value="" , el usuario no puede seleccionarlo usando hidden lo ocultará de la lista de opciones, cuando el usuario abra el cuadro de opciones

Answer 8

Pruebe @title = "cosas". Funcionó para mí

Answer 9

Sí, solo "seleccionado deshabilitado" 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://.com/a/5859221/1225125

Answer 10

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

noneSelectedText: ''Insert Placeholder text''

ejemplo: si tienes:

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

en su javascript, inicializa el seleccionador como este

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

Answer 11

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

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>

Answer 12

Usando Bootstrap, esto es lo que puedes 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>

Answer 13

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>

Answer 14

desplegable o 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 quieres ver la primera opción en la lista, quita la propiedad de visualización de css