11548 sujets

JavaScript, DOM et API Web HTML5

Affichage dans un <select> grace a un autre <select>

Bien le bonjour a vous amis !
Je suis en train de réaliser un travail web et une question me pose problème.
J'ai besoin de réaliser un formulaire avec une petite particularité qui ma foi m'est inconnu ...

J'ai une balise de type <select> qui se remplit par une recherche dans ma BDD Mysql
avec des valeurs du type couleurs (rouge,vert ...).
Et non loin de ma première balise <select> je dispose d'une deuxième balise <select> qui elle
doit se remplir selon le choix réaliser dans ma première balise.
Par exemple si je sélectionne la couleur rouge je voudrait que la seconde balise m'affiche tomates,cerise ...

Mais c'est a ce moment la que le bat blesse, je n'arrive pas a trouver comment réaliser ce petit tour de magie ...

Je tient a préciser que j'ai rechercher dans le forum mais je n'ai pas trouver de réponse a cette simple question (s'il en est qu'elle soit simple), et que mes compétences en javascript ne sont pas des meilleurs.

Merci d'avance pour votre aide ...

-Zelios-
Salut,
Il faut que tu regardes du coté d'AJAX.

Lorsque le premier select sera modifié, tu lances une requête AJAX sur ton serveur, qui appelle donc un fichier PHP, et celui ci te renverra les données a insérer dans ton deuxième select.

Voila un début d'exemple, de tête (en jQuery):


$("select").change(function(){
     $.get("fichier.php",function(data){
          alert(data);
     });
});


Explication du code: Lors du changement d'état de ton select, tu lances une requete AJAX de type GET, et tu affiche une alert box avec le contenu interprété de ton fichier PHP.

A+
Modifié par vdo93 (11 Oct 2011 - 08:42)
vdo93 a écrit :
Il faut que tu regardes du coté d'AJAX.

À priori non.

S'il a 50 choix dans la première liste et autant dans chaque sous-liste, ok pour faire des requêtes XHR (vulgairement appelées AJAX).

Pour des besoins plus limités, c'est franchement pas la peine de s'embêter avec des requêtes supplémentaires, on peut avoir toutes les infos nécessaires dans le DOM (séries de SELECT à afficher/masquer), ou dans des tableaux JavaScript permettant de générer un DOM ad hoc.
Zelios a écrit :
mes compétences en javascript ne sont pas des meilleurs

Tu saurais générer un élément SELECT et des éléments OPTION enfants à partir de données d'un tableau JavaScript, retirer un noeud du DOM et ajouter l'élément généré en JavaScript dans le DOM? Tu sais utiliser des tableaux et objets JavaScript, et des boucles for simples?

Si tu as répondu oui à ces questions, tu devrais t'en sortir.
Si tu as répondu non, bah il va falloir trouver un développeur JavaScript ou intégrateur web compétent en JS pour t'assister sur ce projet. (Ou bien apprendre JavaScript si tu en as le temps et l'envie.)
Modifié par fvsch (11 Oct 2011 - 11:53)
Hello.

Pour un besoin simple, il m'est arrivé d'utiliser : 
<select class="master-select">
	<option value="toto">Toto</option>
	<option value="titi">Titi</option>
	<option value="tutu">Tutu</option>
</select>

<select name="bla" class="slave-select">
	<optgroup class="active" id="toto">
		<option value="11">11</option>
		<option value="12">12</option>
	</optgroup>
	<optgroup id="titi">
		<option value="21">21</option>
		<option value="22">22</option>
	</optgroup>
	<optgroup id="tutu">
		<option value="31">31</option>
		<option value="32">32</option>
	</optgroup>
</select>
Et de retirer/ajouter la classe active du optgroupe ad hoc via JS en fonction de la valeur du premier select. Avec une css du genre : 
.master-select {display: none;}
.hasJS .master-select {display: inline;}

.hasJS .slave-select optgroup {display: none;}
.hasJS .slave-select .active {display: block;}
Par contre je me suis toujours posé des questions sur la réelle accessibilité de la méthode.
EDIT: Coquilles dans la CSS
Modifié par Florian_R (11 Oct 2011 - 14:54)
Bien vu les OPTGROUP!
Florian_R a écrit :
Par contre je me suis toujours posé des questions sur la réelle accessibilité de la méthode.

Elle devrait être bonne dans les deux cas de figure: avec et sans JS.
fvsch a écrit :

À priori non.

S'il a 50 choix dans la première liste et autant dans chaque sous-liste, ok pour faire des requêtes XHR (vulgairement appelées AJAX).

Pour des besoins plus limités, c'est franchement pas la peine de s'embêter avec des requêtes supplémentaires, on peut avoir toutes les infos nécessaires dans le DOM (séries de SELECT à afficher/masquer), ou dans des tableaux JavaScript permettant de générer un DOM ad hoc.


Il est vrai que le choix de l'AJAX ne s'impose pas, mais c'est quand même l'utilisation la plus simple je trouve. Le DOM n'est pas surchargé, et la liste de sous-choix est générée en fonction de la demande de l'utilisateur.

Par contre, pourquoi "vulgairement appellé AJAX"? C'est le nom officiel de cette technologie, non?
Modifié par vdo93 (11 Oct 2011 - 15:56)
vdo93 a écrit :
Par contre, pourquoi &quot;vulgairement appellé AJAX&quot;? C'est le nom officiel de cette technologie, non?
Ajax en temps que techno n'existe pas. C'est en fait l'utilisation conjointe de plusieurs technos ; principalement du JavaScript (XMLHttpRequest) et du XML (à l'ancienne, on a tendance à préférer le json de nos jours).
Sujet clos
Aller à