Espace réservé de la liste déroulante de sélection de bootstrap

104

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?

Jordan.JD
la source

Réponses:

226

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

Frein
la source
4
Cela ne répond pas à la question car il / elle demande une solution intégrée d'amorçage
Mehdi
5
Vous pouvez également utiliser disabled selected hiddenou seulement hiddentous sont corrects. :)
MD Ashik
60

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>
Jay Lin
la source
continuez avec le dernier commentaire, lorsque vous utilisez v-model, doit utiliser ceci: <option: value = "null" disabled hidden> Select Age </option>
Homer
16

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

NeoNe
la source
8
Vous avez écrit une tonne de code personnalisé lors de l'ajout de la classe "sélectionné désactivé" est la même chose.
Jordan.JD
2
À son crédit, le sien est un peu plus complet visuellement (avec plus de code), où l'espace réservé n'est pas rendu dans la sélection de liste. Même si je vais pour la manière de code minimale des choses.
Roadkillnz
8

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'});  
Chadillac
la source
6

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>
VGranine
la source
5

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>
Mark van allumé
la source
En quoi c'est différent de la réponse de Jay Lin et la réponse de Brakke ?
Athafoud
1
Cela a fonctionné le mieux pour moi, car sélectionné, ce qui signifie qu'il est sélectionné par défaut, désactivé afin qu'il ne puisse pas être cliqué et masqué dans la liste déroulante. Je suppose que si caché est utilisé, désactivé n'a probablement pas besoin d'être là.
aspergillusOryzae
4

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

Bassem Shahin
la source
hautement recommandé!
Aqua 4
2

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

Gabriel Janson
la source
3
Un exemple conviendrait parfaitement
workdreamer
2

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>
Tudor
la source
Vous monsieur venez de me sauver. Toutes les options ci-dessus ne fonctionnaient pas pour la sélection multiple. Comme la sélection ne désélectionnait pas les valeurs précédentes. Le titre a fonctionné pour moi
Faran Khan
1
  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>
Amir Hossein Khateri
la source
1

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

Mahesh Yadav
la source
0

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.

Sandeep
la source
0

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>
Srijay
la source
0

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

Oleg
la source
0

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>
tk_
la source
0

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.

Lorenzo Benedetto
la source
0

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.

edu
la source
0
<option value="" defaultValue disabled> Something </option>

vous pouvez remplacer defaultValueparselected mais cela donnerait un avertissement.

Mayank Pathela
la source