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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par lambi521, 28 Juin 2012.

  1. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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:
     
  2. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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...
     
  3. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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...
     
  6. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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é
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    Il n'y a que ceux qui sont sélectionnés qui seront envoyés.
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    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.
     
  9. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    Ah ben voilà nickel, tu as gagné de l'XP :mrgreen:
     
  11. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    Player Lambi521 win Level UP in JS ! He is now Level 1 ! :lol:
     
Chargement...
Similar Threads - [JS] Actualiser options Forum Date
[JS] Forcer deux clics sur un input Développement d'un site Web ou d'une appli mobile 15 Mars 2014
[JS] Remplacer un "," par un "." dans un INPUT Développement d'un site Web ou d'une appli mobile 8 Mars 2012
[JS] executer la fonction d'une variable Développement d'un site Web ou d'une appli mobile 25 Octobre 2011
[JS] - Un script qui plante uniquement en arrivant depuis google ! Développement d'un site Web ou d'une appli mobile 18 Mars 2011
[JS] Un compte a rebours avec avance rapide - dev Développement d'un site Web ou d'une appli mobile 30 Décembre 2010
[JS] Remplacer des retours à la ligne par des <br /> à la saisie Développement d'un site Web ou d'une appli mobile 14 Novembre 2010
[JS] Masquer / afficher un <div> à la saisie d'un <input> Développement d'un site Web ou d'une appli mobile 2 Novembre 2010
[JS] : empêcher la caractère espace Développement d'un site Web ou d'une appli mobile 7 Janvier 2009
[JS] Inserer un text dans un input ! Développement d'un site Web ou d'une appli mobile 18 Août 2008
[JS] Compatibilité FF/IE - fonction via formulaire Développement d'un site Web ou d'une appli mobile 15 Juillet 2008
[JS] CTRL+C "forcé" au clic Développement d'un site Web ou d'une appli mobile 16 Décembre 2007
[JS][résolu]array is not defined pourtant je l'ai défini Développement d'un site Web ou d'une appli mobile 17 Août 2007
[JS] placer le curseur à la fin d'un champ INPUT Développement d'un site Web ou d'une appli mobile 25 Mai 2007
[JS] Petits problemes pour un script Développement d'un site Web ou d'une appli mobile 12 Août 2006
[JS] window.location.href ou document.location.href ? Administration d'un site Web 12 Mai 2005
actualiser régulièrement le site n'est pas simple Débuter en référencement 10 Juin 2022
Actualiser un script php toutes les 10 secondes Développement d'un site Web ou d'une appli mobile 6 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
Index Google difficile à réactualiser Problèmes de référencement spécifiques à vos sites 22 Novembre 2018
google search me dit d'actualiser wordpress Problèmes de référencement spécifiques à vos sites 14 Février 2017