[JavaScript] Comment ça fonctionne les index d'un select ??

[peKKa]

Bonjour,

 

En gros ma question se résumé au titre du post.

 

J'ai un select avec beaucoup d'options. La liste déroulante a un ascenseur très petit ce qui ne facilite pas du tout la sélection d'un élément.

J'ai donc pensé à filtrer un peu ce select en choisissant à l'aide d'un autre select la première lettre.

En choisissant par exemple B sur ce nouveau select je veux que le premier select s'actualise en laissant seulement les options commençant par un B. Ce serait l'idéal pour réduire le nombre d'éléments dans le select.

 

Bref pour cela j'ai fait une petite fonction javascript (je maitrise pas trop cet outil encore) mais je m'emmêle avec les index du select !!

 

Bon je vous montre le code!

Je vous rappelle que j'ai deux select :

- un avec bcp bcp d'options et meme un peu trop (form : noms, select : nom)

- un avec les lettres de l'alphabet pour justement reduire le nombre d'options de l'autres select (form : tri, select : alphab)

voilà la fonction :

 

<script language="javascript">
 function maj() 
 {
var i;
var j=0;
var nb = document.forms.noms.nom.options.length;
for(i=0;26>i;i++)
{
  if (document.forms.tri.alphab.options[i].selected)
  {
	var lettre1 = document.forms.tri.alphab.options[i].text;
	for(j=0;nb>j;j++)
	{
	  var nom = document.forms.noms.nom.options[j].text;
	  var lettre2 = nom.slice(0,1);

	  if (lettre2 != lettre1)
	  {
		document.forms.noms.nom.options[j]=null; 
	  }
	}
  }
}
 }
</script>

 

En fait le pb c'est qu'il ne parcourt pas tous les éléments du tableau.

S'il y a 14 éléments l'index ne va pas de 0 à 13... il va jusqu'à 7 et après il y a des valeurs indéfinies apparemment... bref je comprends pas trop ce qu'il se passe!

 

Sinon autre question : une fois que j'aurai fait cela mon option sera bien épurgé en choisissant une lettre mais si je veux choisir une nouvelle lettre comment récupérer toutes les anciennes valeurs. Apparemment c'est pas possible parce que je les aurais supprimées..

 

Voilà!

 

Merci pour votre aide !

[KewlCat]

comment récupérer toutes les anciennes valeurs. Apparemment c'est pas possible parce que je les aurais supprimées..

Je crois que, rien que pour cela, il va falloir procéder autrement dans ton remplissage / suppression d'éléments de liste...

D'ailleurs, à propos de suppression, le fait de mettre à null un élément de tableau ne le "supprime" pas il est donc normal que tu te retrouves avec des "trous" lorsque tu parcours ton tableau par la suite

 

Si tu as de la chance, ma connexion Internet va pouvoir tenir le coup et tu pourras jeter un oeil aux sources de cette page qui manipule des listes.

http://kewlcat.no-ip.org/tests/suggest.html

 

Ce qu'il faut, c'est récupérer le contenu intégral de la liste une fois la page chargée et recalculer un nouveau tableau d'Options à chaque fois que tu modifies ton choix dans la seconde liste.

[peKKa]

Merci pour ton aide je vais regarder tes sources!

Sinon pour les indices j'ai compris le truc. En fait ce n'est pas des trous qui apparaissaient. En mettant une valeur à null, les index des valeurs suivantes ont été décrémentés.

Donc dans mon script il suffit juste de décrémenter l'indice de boucle quand une option est supprimée.

Donc ça marche mais bien sur je n'ai pas trouvé de moyen pour retrouver la liste !

je vais donc me pencher sur ce que tu as fait. A vue d'oeil, je pense que ça va bien me rendre service et donc je te remercie.

[peKKa]

Ok j'ai compris le principe de ton code.

Toi tu as stocké les valeurs initiales dans un autre select et tu les recharges à chaque initialisation.

Moi je n'ai pas envie d'afficher un select supplémentaire sur ma page. Alors deux questions me viennent :

- Existe t il un attribut du select pour qu'il soit caché ?

- Sinon où puis-je stocker les donneées initiales pour les recharger à chaque changement de lettre ? dans un tableau ? une table de hash serait mieux je pense pour stocker en tant que clé la valeur de chaque option mais je ne sais pas si ça existe en JavaScript....

 

Merci

[KewlCat]

Sur la page j'ai deux select parce que j'avais deux solutions différentes à mon problème (à celui de quelqu'un d'autre, en fait), mais c'est parfaitement faisable avec un seul...

 

Euh, plus simplement, tu peux arriver sur ta page avec ton (seul) select contenant toute la liste et la garder "au chaud" (il suffit de déclarer une variable "globale" et de lui affecter le tableau d'Options du select) dans l'évenement onLoad, ensuite à chaque changement tu crées un nouvel Array d'Options que tu affectes à ton select et tout fonctionnera normalement.

 

Je ne vois pas trop pourquoi tu aurais besoin d'une table de hashage puisque tu n'as pas de couples de valeurs, et de toute façon il n'existe pas d'objet Hashtable en JavaScript (bien qu'il soit possible de déclarer un tableau avec des index sous forme de chaîne et non d'entiers, mais c'est une autre histoire....)

[peKKa]

Je ne vois pas trop pourquoi tu aurais besoin d'une table de hashage puisque tu n'as pas de couples de valeurs,

 

Si justement !

Un peu de code pour voir plus clair :

<select>
<option value="valeur1">valeur2</option>
</select>

 

Tu vois j'ai le couple (valeur1, valeur2) pour chaque option.

Je vais créer un tableau à deux dimensions je pense !

ça doit etre tout à fait faisable

Je m'oqp de ça demain si j'ai un pb je repasserai

 

A+ et merci

[KewlCat]

Okay... Je voyais pas les choses comme ça

A priori tu dois pouvoir te constituer un tableau en créeant les éléments de ton tableau en passant par une boucle sur chaque Option : tableau[tonOption.value] = tonOption

En espérant que ça fonctionne (je n'ai jamais tenté d'utiliser un Array comme une Hashtable)

[peKKa]

Voilà tout marche nickel !!!

Merci pour ton aide !!

Sinon, comme tout ce que j'ai fait ne marchera que si l'utilisateur a activé le JavaScript, je voudrais afficher un message dans le cas où il ne l'a pas activé.

Existe-t-il un moyen de détecter si l'utilisateur a activé le JavaScript ?

 

Merci

[KewlCat]

Utilise la balise <noscript> ...

 

Autre solution : mettre un <div> avec un message en Arial 24 gras rouge qui demande à activer le JavaScript, que tu planques lors du onLoad (donc si le JavaScript n'est pas exécuté, le <div> restera affiché)

[peKKa]

Autre solution : mettre un <div> avec un message en Arial 24 gras rouge qui demande à activer le JavaScript, que tu planques lors du onLoad (donc si le JavaScript n'est pas exécuté, le <div> restera affiché)

 

Bonne idée !