[JS] Séléctionner directement un élément

Dans une liste déroulante

Sujet résolu

26 janvier 2006 à 16:59:34

Salut à tous,

J'ai un petit problème que je n'arrive pas à résoudre. J'ai une liste déroulante :

<select name="country" id="country">
<option name="Belgique">Belgique</option>
<option name="France">France</option>
</select>

Et j'aimerais en ayant par exemple $var (ou {var} puisque j'utilise un template) = 'Belgique'; séléctionner la bonne option. Mais d'après ce que j'ai compris, option[] ne prend en entrée que le numéro de position de l'option. Et donc je ne sais pas où appliquer le .selected = true;

Merci d'avance,
`ixM

Nyro Xeo

26 janvier 2006 à 17:54:20

Hum, je n'ai pas trop compris ton message... Quel rapport avec le JavaScript ? Qu'est-ce que ce "option[]" dont tu parles ? Et ce ".selected = true" ?

Dans le code PHP, pour récupérer la valeur du choix sélectionné dans la liste déroulante, on procède exactement de la même manière que pour d'autres champs de formulaire normaux :

<?php
echo 'La valeur sélectionnée est : '.$_POST['option'];
?>

...il faut donc que l'attribut name de cette liste déroulante soit "option", dans ce cas là. Et la valeur de chaque élément de la liste doit être déterminé grâce à value. Ce qui donne donc :

<select name="option">
<option value="Suisse">Suisse</option>
<option value="Belgique">Belgique</option>
<option value="Canada">Canada</option>
<option value="france" style="font-size: 0.4em; text-decoration: line-through;">france</option>
</select>

Et si tu veux spécifier un élément de la liste qui soit sélectionné par défaut, il faut utiliser l'attribut selected :

ixM

27 janvier 2006 à 22:06:50

Merci NX mais ça je veux dire j'étais déjà au courant.

Je me suis mal exprimé

Donc avec un code php, je récupère le nom d'une ville. J'aimerais dans ma liste (le <select> donc) que l'élément de la liste (un des <option>) dont le value est égal au pays que j'ai récupéré, obtienne l'attribut selected au chargement de la page (en xHTML strict c'est d'ailleurs selected="selected" et non selected tout seul qu'il faut mettre mais j'imagine que tu le sais).

Donc je veux pouvoir utiliser le JavaScript pour simuler un clic sur l'option avec le selected.

Donc ça ferait : <body onLoad="attribue à l'option dont le value == $pays, l'attribut selected='selected'">

C'est uniquement de ça dont j'ai besoin

Merci d'avance,
ixM`

P.S. Je pense qu'en JS, il faut faire quelque chose de ce goût-là pour mettre le selected sur une option :
document.getElementById['form_id'].option[02].selected = true;

Nyro Xeo

27 janvier 2006 à 22:16:55

Ah d'accord je comprends... Bon je te disais tout ça parce que j'ai vu que tu mettais des name à tes <option>, ce qui n'a aucun sens.

Pour ce qui est de ton problème, le JavaScript, c'est moyen pour ce genre de cas. Le mieux est de le faire en PHP.
* Topic déplacé + Titre édité *
En gros, ça consiste à mettre les éléments de la liste dans un Array, à afficher l'Array, et vérifier si $_POST['pays'] est égal à une des valeurs de l'Array. Donc, par exemple, avant la soumission du formulaire :

<?php
$pays = array('Belgique', 'Suisse', 'Canada');
echo '<select name="pays">';
foreach($pays AS $option)
{
echo '<option value="'.$option.'">'.$option.'</option>';
}
echo '</select>';
?>

...puis après soumission du formulaire (en fait, l'idéal est de tout faire dans la même page, pour l'accessibilité) :

<?php
$pays = array('Belgique', 'Suisse', 'Canada');
echo '<select name="pays">';
foreach($pays AS $option)
{
if ($option == $_POST['pays'])
{
echo '<option value="'.$option.'" selected="selected">'.$option.'</option>';
}
else
{
echo '<option value="'.$option.'">'.$option.'</option>';
}
}
echo '</select>';
?>

b.moyet

28 janvier 2006 à 0:32:04

Pour la culture en js c'est:

var formulaire = document.getElementById("form_id");
var option = formulaire.getElementsByTagName("option")[x];//x etant la position dans ta liste que tu veux mettre en selected
var option.setAttribute("selected","selected");

Mais il te faut connaitre cette position, et comme l'a précisé Nyro pour l'accessibilité autant évité le JS alors que tu dois pouvoir faire ca simplement en PHP.

ixM

29 janvier 2006 à 18:32:57

Salut,

Bon le topic est mal déplacé parce que ça me sert à rien de le faire en PHP parce que j'utilise des templates. Tu penses que si c'était possible pour moi de le faire en php, je le ferais

Donc mon problème c'est que j'aimerais justement récupérer la position

Je suis vraiment pas clair dans mes explications mais il me semblait avoir dit que c'était ça mon problème (ou alors je l'ai pas dit pour pas vous aiguiller érronément dans une mauvaise voie).

Donc, comment récupérer la position de l'option dont le value est égal à ma variable {pays} ?

@micalement,
`ixM

b.moyet

29 janvier 2006 à 18:48:15

Citation : `ixM

Et j'aimerais en ayant par exemple $var (ou {var} puisque j'utilise un template) = 'Belgique'; séléctionner la bonne option.

Est-ce qu'il y a moyen de voir cette variable en js? si oui tu as juste a faire:

var options = document.getElementsByTagName("option");
for(var i=0;i<options.length && options[i].value!=mon_pays;i++);
options[i].setAttribute("selected","selected");

strucky

29 janvier 2006 à 18:55:24

En php, tu peux le faire :

<?php

if(empty($_POST['country'])) // choix par défaut
{
$country = "France";
}
else
{
$country = $_POST['country'];
}

$selected = 'selected="selected"';

?>

<select name="country" id="country">
<option name="Belgique" <?php if($country == 'Belgique'){ echo $selected ;} ?>>Belgique</option>
<option name="France" <?php if($country == 'France'){ echo $selected ;} ?> >France</option>
</select>

Je l'utilise et ça fonctionne impec.

Mais comme je n'y connais rien encore sur les templates, je sais pas si tu peux l'adapter à ton code.

ixM

30 janvier 2006 à 0:24:02

var options = document.getElementsByTagName("option");
for(var i=0;i<options.length && options[i].value!=mon_pays;i++);
options[i].setAttribute("selected","selected");

</citation>

Super, je peux pas l'essayer là tout de suite mais je suis sûr que ça va fonctionner

Merci