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?

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

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>

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

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

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>

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>

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

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

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>

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>

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

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.

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>

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

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>

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.

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.

angular html css

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

puede reemplazar defaultValuecon selectedpero eso daría una advertencia.