Préselection select multiples

**renaud26** · 30/12/2009, 20h54

Bonjour à tous,

J'ai une série de select dans une page comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<select name="select[0]">
<option value="tata">tata</option>
...
</select>
...
<select name="select[1]">
<option value="toto">toto</option>
...
</select>
etc...

J'ai également un lien ouvrant une popup, laquelle, en se fermant, fait appel à une fonction reload sur la page parent avec window.opener. Tout est ok.
Ce que je voudrais, c'est que les valeurs qui ont été sélectionnées dans les select soient conservées, alors que le formulaire n'a pas été posté.

J'ai écrit, dans la fonction qui reload et qui est donc appelée à la fermeture du popup : (à titre d'exemple)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var the_select = document.getElementsByName('select[0]');
document.myForm.the_select.options[1].selected=true;

Mais ça ne fonctionne pas et la console FF me sort : document.myForm.the_select is undefined.

Qu'est ce qui cloche ?

**SpaceFrog** · 30/12/2009, 22h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var the_select = document.getElementsByName('select[0]')[0];

pour javascript le name est littéralement "select[0]"

**renaud26** · 31/12/2009, 09h19

Bonjour et merci de ta réponse.
...effectivement, je viens de voir dans un tuto la syntaxe correcte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var the_select = document.getElementsByName('select[0]')[0];
ou
var the_select = document.getElementsByName('select[0]')[1];

Mais j'ai la même erreur sur la console et ça ne fonctionne toujours pas...

**vermine** · 31/12/2009, 09h25

Bonjour,

Vous faites un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var the_select = document.getElementsByName('select[0]');

Vous allez récupérer un tableau (qui n'aura qu'une valeur dans ce cas-ci) et alors ceci ne fonctionnera pas car vous ne lui précisez pas la cellule du tableau que vous désirez atteindre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.myForm.the_select.options[1].selected=true;

D'où la méthode de SpaceFrog, qui je pense, récupère la première cellule du tableau.

**renaud26** · 31/12/2009, 09h33

Bonjour,

en fait dans mon exemple, en faisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var the_select = document.getElementsByName('select[0]')[0];
document.myForm.the_select.options[1].selected=true;

Je pense récupérer et préselectionner le 2ème< option> du premier select de la page...

**vermine** · 31/12/2009, 09h42

Je me suis trompé.

La méthode de SpaceFrog récupère le select sur lequel vous pouvez faire votre .option[i]. Mais, c'est dans la sélection que ça plante.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert(the_select.options[1].value); //Affichera bien le texte qu'il y a après "tata"

**renaud26** · 31/12/2009, 09h47

ben oui, c'est ce que je croyais aussi...
Mais non, et la console FF continue à trouver la var the_select comme undefined.

[edit] : et pourtant, si je fais selon votre exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert(document.getElementsByName('select[0]')[0].value);

Cela m'affiche bien la value de l'option sélectionnée du 1er select, ce que je souhaite. Mais alors pourquoi la var the_select ne fonctionne pas ???

**SpaceFrog** · 31/12/2009, 09h50

tu renseignes une variable avec un objet puis tu repars de document ???
ta variable n'est pas une propriété ni un objet de document ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var the_select = document.getElementsByName('select[0]')[0];
the_select.options[1].selected=true;

**renaud26** · 31/12/2009, 10h05

Hello SpaceFrog,

Viens d'essayer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var the_select = document.getElementsByName('prod[0]')[0];
the_select.options[1].selected=true;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementsByName('prod[0]')[0].options[1].selected=true;

Plus de message d'erreur FF mais pas de pré-selection non plus...
Mais peut-être ferais-je mieux d'exposer ici l'ensemble de mon raisonnement (qui doit être un peu "tordu") ?

**vermine** · 31/12/2009, 10h07

Oui parce que ce code fonctionne chez moi (sous IE).

**renaud26** · 31/12/2009, 10h10

Envoyé par vermine

Oui parce que ce code fonctionne chez moi (sous IE).

Alors ce serait quelque chose qui gênerait FF ???

**SpaceFrog** · 31/12/2009, 10h15

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('prod[0]')[0].options[1].selected="selected"

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('prod[0]')[0].options[1].selected=1;

**renaud26** · 31/12/2009, 10h38

Arggghhh !!! Toujours pas ! Bon. Voici mon raisonnement :

1- Les selects sont générés dynamiquement en PHP, leur nombre sur la page dépend du nombre de produits que le user veut afficher. Pour chacun d'entre eux, le nombre et la valeur des options dépend d'une BDD.

2- Sur les select, j'ai mis un appel de fonction sur un onchange :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<select name='prod[".$i."]' onChange = 'the_produit(this.value, '".$i."')'>
while($row = mysql_fetch_assoc($sql)){
<option value='".$row['id']."'>".$row['nom']."</option>
}
</select>

Côté JS, je déclare deux variables globales (enfin, je pense), puis la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var the_preselect;
var the_option;
 
function the_produit(choix_option, num_select){
	the_preselect = num_select;
	the_option = choix_option;
}

Dans ces variables "globales", je pense mémoriser la sélection du user.

Ensuite, dans la fonction qui reload la page à la fermeture du popup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function renvoi_page(arg1, arg2){
window.location.href= "mapage.php?arg1=arg1&arg2=arg2";
//et le fameux :
var the_select = document.getElementsByName('prod[0]')[the_preselect];
the_select.options[the_option].selected="selected";
}

Voili voilou... tordu ? débile ?

**vermine** · 31/12/2009, 10h45

Je n'ai pas bien compris l'histoire de la pop up mais si la page est rechargée, les variables Javascript sont vidées. Il y a une communication de fille à mère ? Ensuite, il y a ceci à corriger:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
window.location.href= "mapage.php?arg1=" + arg1 + "&arg2=" + arg2;

**renaud26** · 31/12/2009, 11h18

Les variables sont vidées au rechargement...
Alors, il n'y a aucun moyen de conserver une pré-selection dans un select après que la page ait été rechargée ???
Aucune façon de "mémoriser" un choix de select ?

Oui, pour la synaxe de window.location.href, j'ai écrit ça vite fait ici. Le reload fonctionne bien....et il efface les pré-selections...

**vermine** · 31/12/2009, 11h22

Mmm... Avant ça, est-il nécessaire de recharger la page à la fermeture de la pop up ?
Je ne sais pas trop si il y a moyen de jouer avec des cookies, des sessions ou bien faire submit d'un petit formulaire qui contiendrait les deux-trois valeurs qui vous intéressent pour les select.

**SpaceFrog** · 31/12/2009, 11h36

Qui dit select dit soumission de formulaire à la page en action du form...
Pourquoi passer par javascript si tu as les elements en php ?

**renaud26** · 31/12/2009, 12h02

Je tente de répondre à vous deux :

Certes j'ai tous les éléments en php...mais ce que je voudrais c'est que les choix de select soient conservés alors que le formulaire n'est pas encore posté ! Le popup, en se fermant, refresh la page et efface donc ce qui a été pré-selectionné dans les select.

Ce popup, en fait, est un genre de catalogue que l'on peut modifier. C'est ce qui détermine les options des select de la page mère. Pour que les changements soient pris en compte et s'affichent sur la page mère, j'ai besoin qu'elle soit rafraîchie à la fermeture du popup.

Mais si il n'est pas possible de garder une pré-selection "en mémoire" sans que le form ne soit posté, alors je capitule et vous remercie beaucoup d'avoir passé du temps sur mon "problème" (ce mot honni n'est pas dans le titre !