web-dev-qa-db-fra.com

Zone de liste déroulante de sélection de bootstrap

J'essaie de créer une liste déroulante contenant un espace réservé. Il ne semble pas supporter placeholder="stuff" comme le font les autres formulaires. Existe-t-il un moyen différent d'obtenir un espace réservé dans ma liste déroulante?

htmltwitter-bootstrapplaceholder
77
Jordan.J.D

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

Vous pouvez également voir la réponse à

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

171
Brakke

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>
42
Jay Lin

dropdown ou select 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 pour qu'il ait le même aspect que d'autres espaces réservés.

    $('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 dans la liste, retirez la propriété d'affichage de css

15
NeoNe

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

noneSelectedText: 'Insert Placeholder text'

exemple: si vous avez:

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

dans votre javascript, vous initialisez le selectpicker comme ceci

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

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>
3
Mark van Lit

Essaye ça:

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

lorsqu’il utilise required + value="", l’utilisateur ne peut pas le sélectionner utiliser hidden le masquera de la liste des options, lorsque l’utilisateur ouvrira la boîte des options

3
Bassem Shahin

Toutes ces options sont .... improvisations . Bootstrap offre déjà une solution pour cela . Si vous souhaitez modifier l’espace réservé pour tous vos éléments déroulants, vous pouvez modifier la valeur 

noneSelectedText dans le fichier de démarrage.

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

La plupart des options sont problématiques pour la sélection multiple . Attribut Place Title, et rendre la première option as data-hidden = "true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>
2
VGranin
  1. dans bootstrap-select.js Trouvez title: null, et supprimez-le.
  2. ajoutez title="YOUR TEXT" dans l'élément <select>.
  3. Bien :)

Exemple: 

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

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

1
Gabriel Janson

À l’aide de bootstrap, si vous devez également ajouter des valeurs à l’option à utiliser pour les filtres ou autre chose, vous pouvez simplement ajouter la classe "bs-title-option" à l’option que vous souhaitez utiliser 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'attribut title.

0
Lorenzo Benedetto

Solution pour Angular 2

Créer une étiquette sur 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 appliquer CSS pour le placer en haut

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

 angularhtmlcss

0
edu

Pour la page .html

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

pour .jsp ou 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>
0
tk_

Je pense que la zone de liste déroulante avec une classe et le code JQuery permettant de désactiver la première option de sélection de l'utilisateur fonctionne parfaitement en tant que Place Box placeholder .

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

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

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

Cela fera de la première option de menu déroulant un espace réservé et l’utilisateur ne pourra plus sélectionner la première option.

J'espère que ça aide!!

0
Mahesh Yadav

En utilisant Bootstrap, voici ce que vous pouvez faire. En utilisant la classe "text-hide", l'option désactivée sera affichée au début 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>
0
Srijay

Bootstrap select a une option noneSelectedText. Vous pouvez le définir via l'attribut data-none-selected-text . Documentation .

0
Oleg

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>

"Choisir la plate-forme" devient l'espace réservé et la propriété "obligatoire" 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.

0
Sandeep