J'essaie de créer une liste déroulante contenant un espace réservé. Cela ne semble pas prendre en charge placeholder="stuff"comme le font d'autres formes. Existe-t-il une manière différente d'obtenir un espace réservé dans ma liste déroulante?

Oui juste "sélectionné désactivé" dans l'option.

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

Lien vers violon

Vous pouvez également consulter la réponse sur

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

Utiliser caché:

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

la liste déroulante ou la sélection n'a pas d'espace réservé car HTML ne le prend pas en charge, mais il est possible de créer le même effet afin qu'il ait le même aspect que les autres entrées d'espace réservé

    $('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 vous voulez voir la première option de la liste, supprimez la propriété d'affichage du css

Si vous initialisez le champ de sélection via javascript, les éléments suivants peuvent être ajoutés pour remplacer le texte d'espace réservé par défaut

noneSelectedText: 'Insert Placeholder text'

exemple: si vous avez:

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

dans votre javascript, vous initialisez le sélecteur comme ceci

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

La plupart des options posent problème pour la sélection multiple. Placez l'attribut Title et définissez la première option comme data-hidden = "true"

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

Ajouter un attribut caché:

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

Essaye ça:

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

lors de l'utilisation required+ value=""alors l'utilisateur ne peut pas le sélectionner en utilisant hiddenle rendra masqué de la liste d'options, lorsque l'utilisateur ouvrira la boîte d'options

Essayez @title = "trucs". Cela a fonctionné pour moi.

Toutes ces options sont ... des improvisations. Bootstrap propose déjà une solution pour cela. Si vous souhaitez modifier l'espace réservé pour tous vos éléments de liste déroulante, vous pouvez modifier la valeur de

noneSelectedText dans le fichier d'amorçage.

Pour changer individuellement, vous pouvez utiliser le paramètre TITLE.

exemple:

<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. dans bootstrap-select.jsRechercher title: null, et supprimer.
2. ajouter title="YOUR TEXT"à l' <select>élément.
3. Bien :)

Exemple:

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

Je pense que la zone de liste déroulante avec une classe et un code JQuery pour désactiver la première option que l'utilisateur doit sélectionner fonctionnera parfaitement comme espace réservé Select Box .

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

Rendez la première option désactivée par JQuery.

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

Cela rendra la première option de Dropdown comme espace réservé et l'utilisateur ne pourra plus sélectionner la première option.

J'espère que ça aide!!

Voici une autre façon de le faire

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

"Choose Platform" devient l'espace réservé et la propriété "required" garantit que l'utilisateur doit sélectionner l'une des options.

Très utile, lorsque vous ne souhaitez pas utiliser de noms de champs ou d'étiquettes.

En utilisant Bootstrap, voici ce que vous pouvez faire. En utilisant la classe "text-hide", l'option désactivée sera affichée en premier mais pas dans la liste.

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

Bootstrap select a une noneSelectedTextoption. Vous pouvez le définir via l' data-none-selected-textattribut. Documentation .

Pour la .htmlpage

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

pour .jspou toute autre page 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>

En utilisant bootstrap, si vous avez également besoin d'ajouter des valeurs à l'option à utiliser pour les filtres ou d'autres choses, vous pouvez simplement ajouter la classe "bs-title-option" à l'option que vous voulez comme espace réservé:

<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 ajoute cette classe à l' titleattribut.

Solution pour Angular 2

Créez une étiquette au-dessus de la sélection

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

et appliquez CSS pour le placer au-dessus

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

pointer-events: none vous permet d'afficher la sélection lorsque vous cliquez sur l'étiquette, qui est masquée lorsque vous sélectionnez une option.

angulaire html css

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

vous pouvez remplacer defaultValueparselected mais cela donnerait un avertissement.