[JS] Actualiser options <select> après choix d'un autre <select>

WRInaute passionné
Bonjour à tous,

Pour facilité grandement la recherche sur mon site, j'aurais grandement besoin de votre aide ! Je ne suis pas un pro du JS mais je sais que c'est LA solution. J'ai beaucoup cherché sur le net et j'ai trouvé des exemples mais comme je ne comprend RIEN au JS, la moindre modif cassait le système.

Mon problème, très simple :

J'ai une liste <select> dont les <option> sont des marques de fabricants d'imprimantes.
La 2ème contient tous les modèles d'imprimantes. Je souhaites l'actualiser une fois qu'on a choisit une marque pour n'afficher que celles correpondantes.

Voici la construction de mes listes :
PHP:
<span class="syntaxhtml"><FORM><br /><select id="prints_fabricant" onClick="affiche_liste_imprimantes(this.value)"><br /><span class="syntaxdefault"><?php $sql </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> mysql_query </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"SELECT manufacturers_name FROM manufacturers ORDER BY manufacturers_name"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">while </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$qry </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> mysql_fetch_array </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$sql</span><span class="syntaxkeyword">))</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{</span><span class="syntaxdefault">echo </span><span class="syntaxstring">"<option value="</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">$qry</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'manufacturers_name'</span><span class="syntaxkeyword">].</span><span class="syntaxstring">">"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> $qry</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'manufacturers_name'</span><span class="syntaxkeyword">]</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> </span><span class="syntaxstring">"</option>"</span><span class="syntaxkeyword">;}</span><span class="syntaxdefault"> ?><br /></span></select><br /><br /><SELECT id="prints_modele"><br /><span class="syntaxdefault"><?php $qry2 </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> mysql_query </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"SELECT p.prints_name, p.manufacturers_id FROM prints p ORDER BY p.prints_name"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">while </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$sql2 </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> mysql_fetch_array </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$qry2</span><span class="syntaxkeyword">))</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{</span><span class="syntaxdefault">echo </span><span class="syntaxstring">'<option id="'</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">$sql2</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'manufacturers_id'</span><span class="syntaxkeyword">].</span><span class="syntaxstring">'">'</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">$sql2</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'prints_name'</span><span class="syntaxkeyword">].</span><span class="syntaxstring">'</option>'</span><span class="syntaxkeyword">;}</span><span class="syntaxdefault"> ?><br /></span></select><br /></FORM></span>

Ensuite dans ma fonction JS affiche_liste_imprimantes(this.value), il faudrait soit réactualiser le 2ème <select>. Soit rendre ceux dont le fabricant n'est pas le bon invisibles ou inactifs peut-importe, "disable". Ca doit être possible vu qu'ils ont en "id" l'id du fabricant qu'on a choisit, en gros il faut désactivé tous les <option> dont l'id est != du 1er select choisi.

Quelqu'un peut m'aider ? :roll:
 
WRInaute passionné
La solution en jQuery à l'air de me convenir, je vais tester et je redis si ça marche !

Par contre ça fait encore un fichier à charger, c'est pas terrible, y'aurais pas une solution avec juste document.getElementbyId(id_fabricant).style = "display:visible;" ?

Et tous ceux qui ne sont pas du fabricant du 1er select en display:none, ou un truc comme ça...
 
WRInaute passionné
Merci ça marche nikel ! j'ai opté pour le plugin jQuery chained select et ça marche impec

Maintenant que j'arrive à remplir mon <select> avec les <option> cliqués de l'autre <select>, comment je peux les récupérer afin d'enregistrer les valeurs sélectionnées en BDD ?

Car vu que c'est rempli en JS, le code source du <select> où il y a les <option> choisis reste vide, c'est comme si la page n'avait pas changé.

C'est possible de récupérer plusieur <option> sélectioné en JS et de faire une boucle pour insérer les données en BDD ?

Merci encore pour ton aide
 
WRInaute passionné
C'est possible de récupérer plusieur <option> sélectioné en JS et de faire une boucle pour insérer les données en BDD ?
Sans recharger la page je veux dire, dans ton exemple il envoie juste un <select multiple>, moi ce que je veux c'est récupérer tous les <option> du <select> rempli en JS, pour pouvoir sauvegarder en BDD lors du submit

Apparement ça envoie un tableau <select name="prints[]" multiple> avec toutes les valeurs des <option>, mais vu que c'est charger en JS, avec un submit normal c'est comme si le <select> restait vide...
 
WRInaute passionné
En fait ça marche, on peut passer passer des <option> sélectionnés en JS

Par contre, comment passer tous les <option> du <select> et pas seulement ceux qui sont "sélectionnés" (mis sur fond bleu dans la liste) ?

C'est le bordel entre PHP et JS là je suis paumé
 
WRInaute accro
Tu peux faire ça avec une frame. C'est old scool mais facile, au changement du premier select tu provoque un refresch de la frame qui contient le deuxième en passant le param constructeur dans l'url. Sur le onchange ou autre du second tu peut envoyer une url calculée en JS (en fonction de l'option) dans la frame parente et tu change de page.
 
WRInaute passionné
Ok c'est bon, problème résolu !

Ce que j'ai fait :
_ 1ère liste contenant les marques
_ 2ème liste contenant les modèles de la marque choisie (liée à la 1ère avec le plugin jQuery)
_ 3ème liste content les modèles cliqués de la 2ème liste

Lors du submit, j'ai rajouté une ligne qui rend tous les <option> de la 3ème liste en "selected", ce qui fait que je récupère tous les <option> en $_POST, ensuite je parcours le tableau en PHP en je les insert dans ma BDD.

Je suis sûr que ça aurait pris 2min pour quelqu'un qui connait le JS, mais sans vous je n'y serai surement pas arrivé !

Merci
 
Discussions similaires
Haut