Sto cercando di creare un elenco a discesa che contenga un segnaposto. Non sembra supportare placeholder="stuff"come fanno altre forme. C'è un modo diverso per ottenere un segnaposto nel mio menu a discesa?

Sì, solo "selezionato disabilitato" nell'opzione.

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

Collegamento al violino

Puoi anche visualizzare la risposta su

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

Usa nascosto:

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

il menu a discesa o la selezione non ha un segnaposto perché HTML non lo supporta ma è possibile creare lo stesso effetto in modo che abbia lo stesso segnaposto degli altri input

    $('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>

se vuoi vedere la prima opzione nell'elenco, rimuovi la proprietà di visualizzazione dal css

Se stai inizializzando il campo di selezione tramite javascript, è possibile aggiungere quanto segue per sostituire il testo segnaposto predefinito

noneSelectedText: 'Insert Placeholder text'

esempio: se hai:

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

nel tuo javascript, inizializzi il selectpicker in questo modo

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

La maggior parte delle opzioni è problematica per la selezione multipla. Posiziona l'attributo Titolo e imposta come prima opzione data-hidden = "true"

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

Aggiungi attributo nascosto:

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

Prova questo:

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

quando si usa required+, l' value=""utente non può selezionarlo usando hiddenlo renderà nascosto dall'elenco delle opzioni, quando l'utente apre la casella delle opzioni

Prova @title = "stuff". Ha funzionato per me.

Tutte queste opzioni sono ... improvvisazioni. Bootstrap offre già una soluzione per questo. Se desideri modificare il segnaposto per tutti gli elementi del menu a discesa, puoi modificare il valore di

noneSelectedText nel file bootstrap.

Per cambiare individualmente, puoi usare il parametro TITLE.

esempio:

<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. in bootstrap-select.jsTrova title: null, e rimuovilo.
2. aggiungi title="YOUR TEXT"a <select>elemento.
3. Bene :)

Esempio:

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

Penso che la casella a discesa con una classe e un codice JQuery per disabilitare la prima opzione che l'utente può selezionare, funzionerà perfettamente come segnaposto della casella di selezione .

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

Rendi la prima opzione disabilitata da JQuery.

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

Ciò renderà la prima opzione di Dropdown come segnaposto e l'utente non sarà più in grado di selezionare la prima opzione.

Spero che sia d'aiuto!!

Ecco un altro modo per farlo

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

"Scegli piattaforma" diventa il segnaposto e la proprietà "obbligatoria" garantisce che l'utente debba selezionare una delle opzioni.

Molto utile, quando non si desidera utilizzare nomi di campo o etichette.

Usando Bootstrap, questo è quello che puoi fare. Utilizzando la classe "text-hide", l'opzione disabilitata verrà mostrata all'inizio ma non nell'elenco.

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

Bootstrap select ha noneSelectedTextun'opzione. Puoi impostarlo tramite data-none-selected-textattributo. Documentazione .

Per .htmlpagina

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

per .jspo qualsiasi altra pagina 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, se hai bisogno di aggiungere anche alcuni valori all'opzione da usare per filtri o altre cose puoi semplicemente aggiungere la classe "bs-title-option" all'opzione che vuoi come segnaposto:

<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 aggiunge questa classe titleall'attributo.

Soluzione per Angular 2

Crea un'etichetta sopra la selezione

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

e applica CSS per posizionarlo sopra

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

pointer-events: none consente di visualizzare la selezione quando si fa clic sull'etichetta, che è nascosta quando si seleziona un'opzione.

angolare html css

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

puoi sostituire defaultValuecon selectedma questo darebbe un avvertimento.