Partage
  • Partager sur Facebook
  • Partager sur Twitter

balise select : valeur par défaut

Sujet résolu
3 mai 2010 à 17:41:25

Bonjour,

Sur ma page web, j'ai une liste déroulante que j'ai insérer avec les balises <select></select>.

Jusque la pas de soucis sa marche nikel!

Mais après, ma question est : Peut-on mettre une valeur par défaut (ou présélectionnée) ou un texte qui n'est pas dans la liste déroulante?

Je m'explique :

Ma liste déroulante est une liste de toute les régions de France qui est dans un formulaire de recherche.
Je voudrait donc afficher sur cette liste déroulante le mot 'Région' tant que l'utilisateur n'a pas fait son choix de région mais sans que ce mot ne soit visible dans la liste ensuite car c'est un champ obligatoire du formulaire!

Si quelqu'un sait si une solution existe, merci de la transmettre...

Merci d'avance
  • Partager sur Facebook
  • Partager sur Twitter
3 mai 2010 à 19:57:56

Bonjour,
>>La page du site du zéro qui t'explique<< et le code qui t'intéresse:
<form method="post" action="traitement.php">
       <select name="region" id="region">
           <optgroup label="Région">
               <option value="ile_de_france">Ile de France</option>
               <option value="bretagne">Bretagne</option>
               <option value="normandie">Normandie</option>
           </optgroup>
       </select>
</form>
  • Partager sur Facebook
  • Partager sur Twitter
3 mai 2010 à 19:59:52

oui c'est facile voilà il suffit de mettre dans la balise qui doit être présélectionnée selected="selected" dans la balise option comme ça

<select>
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
</select>

et la 2 sera sélectionne par défaut


  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2010 à 10:42:33

Merci pour vos réponse mais elle ne correspondent pas exactement a ce que je recherche.

En effet moi je veux que tant que la liste n'a pas été déroulée et aucune région sélectionnée dans la liste, on voit le mot 'Région' comme si c'était une valeur présélectionnée (alors que ce n'en est pas une...) et lorsque l'utilisateur a fait un choix dans la sélection il doit obligatoirement avoir le choix que entre des régions c'est a dire sans avoir le mot 'Région' (qu'on avait avant) dans la liste.

Or ta solution, Yourgod2000, permet de ne pas pouvoir sélectionner le mot 'Région' dans la liste mais il n'est pas affiché auparavant quand la sélection n'a pas encore faite.

Et, darrkangel, ta solution ne répond pas a mon problème. elle permet juste de présélectionner une valeur de la liste or moi je ne veux pas de présélection, je veux juste afficher un mot qui n'est pas dans la liste.

Ce que je demande est peut-ètre impossible mais si sa existe ... sa m'intéresse!



Sinon si ce que je demande n'est pas possible,
- peut-on, lorsque l'on déroule la liste déroulante, supprimer ou cacher une valeur de la liste (avec du javascript ou autre) pour ne plus y avoir acces?
- peut-on avoir une valeur dans la liste déroulante qui est présélectionner et que l'on ne peut pas sélectionner ensuite mais toujours visible?
  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2010 à 11:17:11

Je pense que ça doit être possible en javascript, je ne sais pas exactement comment mais il doit y avoir moyen de faire un "onclick" pour qu'au moment du clic l'option "choisir" disparaisse.
<form method="post" action="traitement.php">
       <select name="region" id="region">
           <optgroup label="Région">
               <option value="choisir">Choisissez votre région</option>
               <option value="ile_de_france">Ile de France</option>
               <option value="bretagne">Bretagne</option>
               <option value="normandie">Normandie</option>
           </optgroup>
       </select>
</form>

Quelque chose comme:
document.getElementById('select')[0].onclick = function(){
    //On supprime l'option qui a pour valeur "choisir"
};
  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2010 à 13:03:00

ahhh je n'ai pas compris comme ça votre question quand j'ai répondu la première fois et bah c'est très facile voilà le code correspondant

function hide()
{
document.getElementById('to_hide').style.display = 'none';
}


<select name="region" id="region" onchange="hide()">
				<option value="choisir" id="to_hide">Region</option>
               <option value="ile_de_france">Ile de France</option>
               <option value="bretagne">Bretagne</option>
               <option value="normandie">Normandie</option>
       </select>


et bonne chance

j'ai oublié de faire une petite explication voilà j'ai mis un évènement js dans la balise select onchange cela veut dire quand le contenu de select change on exécute la fonction que j'ai nommé hide qui elle va juste rendre la propriété css du element option qui est de id="to_hide" display:none
c'est tt
alors il faut absolument que l'élément cacher contient l'attribut id="to_hide"
et voilà ;)
  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2010 à 16:02:55

Merci a vous!

J'ai essayé vos deux solutions, mais aucune ne fonctionnait...

et j'ai finalement trouvé une solution qui fonctionne sur internet a cette adresse : http://www.aliasdmc.fr/coursjavas/cours_javascript96.html

Merci de votre aide!
  • Partager sur Facebook
  • Partager sur Twitter
18 novembre 2016 à 9:56:53

Moi aussi j'ai voulu faire la même chose, au final j'ai juste ajouter une option en haut de la liste avec le libellé que je voulais et je l'ai désactivé. Ca fait exactement ce que je voulais

  <select class="input-large valid" name="paysSelectionne">
        <option  disabled selected>Select Your Country:</option>
	     <c:forEach items="${liste}" var="pays">
	          <option value="${pay.id}" >
	              ${pay.nom}
</option> </c:forEach> </select>



-
Edité par SEIYA00 18 novembre 2016 à 9:58:55

  • Partager sur Facebook
  • Partager sur Twitter
8 mars 2017 à 16:58:16

Je pense que j'ai trouvé une bonne solution :

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>



  • Partager sur Facebook
  • Partager sur Twitter
18 juillet 2017 à 15:40:14

Bonjour, 

Le sujet date un peu mais voilà une solution qui pourrait servir à d'autres :


furhet a écrit:

Ma liste déroulante est une liste de toute les régions de France qui est dans un formulaire de recherche.
Je voudrait donc afficher sur cette liste déroulante le mot 'Région' tant que l'utilisateur n'a pas fait son choix de région mais sans que ce mot ne soit visible dans la liste ensuite car c'est un champ obligatoire du formulaire!

Si je reprends l'exemple de Yourgod2000 : 

<form method="post" action="traitement.php">

<select name="region" id="region" title="Régions">

<option...

...</option>

</select>

</form>


<!-- title="Texte affiché lorsqu'aucune sélection n'est effectuée" -->

-
Edité par MsPeem 18 juillet 2017 à 15:49:41

  • Partager sur Facebook
  • Partager sur Twitter
10 octobre 2017 à 14:23:08

Je confirme ce que dit EstiAt : une option avec la value="" est considérée comme n'étant pas choisie et le formulaire ne pourra dès lors pas être posté tant qu'elle n'aura pas été changée.

Et title c'est une info bulle, pas un texte affiché quand aucune option n'est sélectionée

-
Edité par zezettepglc 10 octobre 2017 à 14:36:51

  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2018 à 11:56:03

Bonjour,

Je cherchais également et en réfléchissant un peu plus j'ai trouvé cette solution :

<select>
<option>1</option>
<option selected disabled>2</option>
<option>3</option>
</select>

dans ce cas ci, l'option 2 sera affichée par défaut mais l'attribut disabled empêchera de la séléctionner.

Chose que je n'ai pas testé, si on valide directement le formulaire, je ne sais pas si il envoi l'attribut sélectionné ou si il se rend compte que rien n'est réellement sélectionné.

-
Edité par PierreCoustance 16 juillet 2018 à 11:59:59

  • Partager sur Facebook
  • Partager sur Twitter