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?
html
twitter-bootstrap
placeholder
Jordan.JD
la source
la source
disabled selected hidden
ou seulementhidden
tous sont corrects. :)Utiliser caché:
la source
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é
si vous voulez voir la première option de la liste, supprimez la propriété d'affichage du css
la source
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:
dans votre javascript, vous initialisez le sélecteur comme ceci
la source
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"
la source
Ajouter un attribut caché:
la source
Essaye ça:
lors de l'utilisation
required
+value=""
alors l'utilisateur ne peut pas le sélectionner en utilisanthidden
le rendra masqué de la liste d'options, lorsque l'utilisateur ouvrira la boîte d'optionsla source
Essayez @title = "trucs". Cela a fonctionné pour moi.
la source
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
Pour changer individuellement, vous pouvez utiliser le paramètre TITLE.
exemple:
la source
bootstrap-select.js
Recherchertitle: null,
et supprimer.title="YOUR TEXT"
à l'<select>
élément.Exemple:
la source
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 .
Rendez la première option désactivée par JQuery.
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!!
la source
Voici une autre façon de le faire
"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.
la source
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.
la source
Bootstrap select a une
noneSelectedText
option. Vous pouvez le définir via l'data-none-selected-text
attribut. Documentation .la source
Pour la
.html
pagepour
.jsp
ou toute autre page de servlet.la source
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é:
Bootstrap ajoute cette classe à l'
title
attribut.la source
Solution pour Angular 2
Créez une étiquette au-dessus de la sélection
et appliquez CSS pour le placer au-dessus
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
la source
vous pouvez remplacer
defaultValue
parselected
mais cela donnerait un avertissement.la source