Je pensais que l'ajout d'un "value"
ensemble d'attributs sur l' <select>
élément ci-dessous entraînerait la sélection du <option>
contenant my fourni "value"
par défaut:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Cependant, cela n'a pas fonctionné comme je m'y attendais. Comment définir quel <option>
élément est sélectionné par défaut?
html
html-select
Jichao
la source
la source
Réponses:
Définissez
selected="selected"
l'option que vous souhaitez utiliser par défaut.la source
ng-model
remplace la valeur sélectionnée par défaut (même si non définie si vous n'avez pas défini l'objet lié). Il m'a fallu un certain temps pour comprendre que c'était la raison pour laquelle l'selected="selected"
option n'était pas sélectionnée.Dans le cas où vous souhaitez avoir un texte par défaut comme une sorte d'espace réservé / indice mais pas considéré comme une valeur valide (quelque chose comme "compléter ici", "sélectionnez votre nation" etc.), vous pouvez faire quelque chose comme ceci:
la source
hidden
attribut à la place. Voir la réponse de @ chong-lip-phang ci-dessous: stackoverflow.com/a/39358987/1192426<option value="" selected disabled hidden>Choose here</option>
Exemple complet:
la source
selected="selected"
? Je veux dire, qu'économisez-vous? Temps? Taille? C'est négligeable et s'il rend le code plus "conforme", pourquoi ne pas le faire ?Je suis tombé sur cette question, mais la réponse acceptée et très appréciée n'a pas fonctionné pour moi. Il se trouve que si vous utilisez React, la configuration
selected
ne fonctionne pas.Au lieu de cela, vous devez définir une valeur dans la
<select>
balise directement comme indiqué ci-dessous:En savoir plus sur les raisons ici sur la page React .
la source
value
attribut de la<select>
balise, c'est<select value="3">
-à- dire , mais elle n'est pas valide dans le validateur W3C.$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
Vous pouvez le faire comme ceci:
Fournissez le mot-clé "sélectionné" à l'intérieur de la balise d'option, que vous souhaitez voir apparaître par défaut dans votre liste déroulante.
Ou vous pouvez également fournir un attribut à la balise d'option, c'est-à-dire
la source
selected="false"
n'est pas autorisé et leselected=""
rend également sélectionné. La seule façon de faire une option non sélectionnée est de supprimer l'attribut. w3.org/html/wg/drafts/html/master/…si vous voulez utiliser les valeurs d'un formulaire et le garder dynamique essayez ceci avec php
la source
Je préfère ça:
«Choisir ici» disparaît après la sélection d'une option.
la source
value=""
pour vous assurer d'obtenir une valeur vide.Une amélioration pour la réponse de nobita . Vous pouvez également améliorer la vue visuelle de la liste déroulante en masquant l'élément «Choisir ici».
la source
Le meilleur moyen à mon avis:
Pourquoi pas désactivé?
Lorsque vous utilisez l'attribut désactivé avec
<button type="reset">Reset</button>
valeur n'est pas réinitialisé à l'espace réservé d'origine. Au lieu de cela, le navigateur choisit la première option non désactivée, ce qui peut entraîner des erreurs de l'utilisateur.Valeur vide par défaut
Chaque formulaire de production a une validation, alors la valeur vide ne devrait pas être un problème. De cette façon, nous pouvons avoir vide non sélectionné sélectionner.
Attributs de syntaxe XHTML
selected="selected"
la syntaxe est le seul moyen d'être compatible avec XHTML et HTML 5. C'est une syntaxe XML correcte et certains éditeurs peuvent en être satisfaits. Il est plus rétrocompatible. Je n'ai pas un sentiment fort à ce sujet, mais si les arguments mentionnés ci-dessus sont vos exigences, vous devez suivre la syntaxe complète.la source
Un autre exemple; en utilisant JavaScript pour définir une option sélectionnée.
(Vous pouvez utiliser cet exemple pour boucler un tableau de valeurs dans un composant déroulant)
<select id="yourDropDownElementId"><select/>
la source
el.selected = "selected";
conforme à la norme w3?selected
est une propriété booléenne telle que définie par w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Options présélectionnées sélectionnées [CI] - Lorsqu'il est défini, cet attribut booléen spécifie que cette option est présélectionné. »Pour plus d'informations sur l'utilisation, voir écoles w3c - w3schools.com/jsref/prop_option_selected.asple sélectionnés attribut est un attribut booléen.
Lorsqu'elle est présente, elle spécifie qu'une option doit être présélectionnée lors du chargement de la page.
L'option présélectionnée sera affichée en premier dans la liste déroulante.
la source
Si vous êtes en réaction, vous pouvez utiliser
defaultValue
comme attribut plutôt quevalue
dans la balise de sélection.la source
Si vous utilisez select avec angular 1, vous devez utiliser ng-init, sinon, la deuxième option ne sera pas sélectionnée car, ng-model remplace la valeur par défaut sélectionnée
la source
J'ai utilisé cette fonction php pour générer les options et l'insérer dans mon HTML
Et puis dans mon code de page Web, je l'utilise comme ci-dessous;
Si $ endmin est créé à partir d'une variable _POST à chaque chargement de la page (et que ce code se trouve dans un formulaire qui publie), la valeur précédemment sélectionnée est sélectionnée par défaut.
la source
l'attribut value de la balise est manquant, il ne s'affiche donc pas comme vous le souhaitez. Par défaut, la première option s'affiche lors du chargement de la page déroulante, si l'attribut value est défini sur la balise .... J'ai résolu mon problème de cette façon
la source
Ce code définit la valeur par défaut de l'élément HTML select avec PHP.
la source
Vous pouvez utiliser:
au lieu de,
les deux sont également corrects.
la source
Je voudrais simplement faire de la première option de sélection la valeur par défaut et masquer cette valeur dans le menu déroulant avec la nouvelle fonctionnalité "cachée" de HTML5. Comme ça:
la source
Je l'utilise moi-même
la source
Vous avez juste besoin de mettre l'attribut "sélectionné" sur une option particulière au lieu de diriger directement pour sélectionner l'élément.
Voici un extrait d'un exemple de travail identique et multiple avec des valeurs différentes.
la source
Set selected = "selected" where is option value is 3
veuillez voir l'exemple ci-dessous
la source
Le problème avec
<select>
, c'est qu'il est parfois déconnecté de l'état de ce qui est actuellement rendu et à moins que quelque chose n'ait changé dans la liste d'options, aucune valeur de changement n'est retournée. Cela peut être un problème lorsque vous essayez de sélectionner la première option dans une liste. Le code suivant peut obtenir la première option la première fois sélectionnée, maisonchange="changeFontSize(this)"
ne le serait pas par lui-même. Il existe des méthodes décrites ci-dessus utilisant une option fictive pour forcer un utilisateur à modifier une valeur pour récupérer la première valeur réelle, comme démarrer la liste avec une valeur vide. Remarque: onclick appellera la fonction deux fois, le code suivant ne le fait pas, mais résout le premier problème.la source
J'utilise Angular et j'ai défini l'option par défaut en
Modèle HTML
Scénario:
la source
Voilà comment je l'ai fait ...
la source
Vous pouvez essayer comme ça
la source
Extrait HTML:
Extrait JavaScript natif:
la source
la source