[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 476
    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 476
    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 476
    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:
    8 786
    J'aime reçus:
    240
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    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 476
    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:
    8 786
    J'aime reçus:
    240
    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 196
    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 476
    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:
    8 786
    J'aime reçus:
    240
    Ah ben voilà nickel, tu as gagné de l'XP :mrgreen:
     
  11. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    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
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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice