Bonjour,
je veux créé une liste de prix sur internet.
donc j'ai besoin d'avoir des drop box qui sont connecté ensemble :

Quantité
Grandeur
Impression 1 coté ou 2 coté
et reussir a ce que tous ses boites soient combiné ensemble pour me donner un prix différent a chaque choix... (Value selected)

Voici les codes que j'ai réussit à faire... je sais il y a probablement beaucoup de travail, mais simplement m'expliquer comment ca marche et la base, je vais pouvoir faire la suite.
merci beaucoup :

<form name="myform"><div align="left">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options
[document.myform.optone.selectedIndex].value,
document.myform.opttwo);">
<option value=" " selected="selected">Quantity</option>
<option value="">250 Business Card</option>
<option value="">500 Business Card</option>
<option value="">750 Business Card</option>
</select><br> <br>
<select name="opttwo" size="1"
onchange="setOptions(document.myform.opttwo.options
[document.myform.opttwo.selectedIndex].value,
document.myform.optthree);">
<option value=" " selected="selected">Size</option>
<option value=" " selected="selected">3.5x2 inch</option>
<option value=" " selected="selected">4x6 inch</option>
<option value=" " selected="selected">5x7 inch</option>
</select><br> <br>
<select name="optthree" size="1">
<option value=" " selected="selected">Impression</option>
<option value=" " selected="selected">Printed 1 sided</option>
<option value=" " selected="selected">Printed 2 sided</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.optthree.options
[document.myform.opttwo.selectedIndex].value);">
</div></form>

salut,

heu c'est quoi une "drop box" (une boite a jetter ? déplacer ? ....).

dans le code je vois y au nformulaire HTML qui va te fournir 3 options, s'il n'y a rien d'autre effectviement ça va pas beaoucp bouger

Après faut voir si les prix sont déja fixé ou s'il y aune régle de calcul (par exemple une face c'est x€ et deux face c'est 2x€ etc).

A partir de la, sur le script, cible du formulaire tu va récupérer les infos selectionnées dans les trois liste.
A partir de ces trois liste tu peux faire le calcul ou récupérer le prix.

PS : le BESOIN D'AIDE! ne va pas te faire aider plus vie, voir même moins vite

il nous manque donc des infos pour plus t'aider.

@+

Pour ce qui est du ''besoin d'aide'', tu as bien raison, c'était vraiment amateur de ma part... J'ai voulu l'effacer après avoir lu les règlements, mais il était trop tard. hehehehe

J'appelle ça des drop box, mais bon c'est peut être pas le terme (mais mon codage est vraiment comme je veux)

dans le fond je voudrais que quand je clique :

250 cartes / 3,5x2 / 1 côté CA ME DONNE : 40$
250 cartes / 3,5x2 / 2 côté CA ME DONNE : 65$
250 cartes / 6x4 / 1 côté CA ME DONNE : 60$
250 cartes / 6x4 / 2 côté CA ME DONNE : 85$
250 cartes / 5x7 / 1 côté CA ME DONNE : 80$
250 cartes / 5x7 / 2 côté CA ME DONNE : 100$
ainsi de suite...

Je veux des prix déja fixer, ça va etre moin compliqué.
Je crois que ca me donne 18 possibilités de prix (3 quantité x 3 grandeur x 2 imprimé)

est ce que c'est possible?
Comme tu peux voir, je suis un amateur autant sur le forum qu'en codage HTML hahahah

En français, une « drop box » s'appelle une liste déroulante, et « linker » est une francisation barbare du mot anglais « link » qui se traduit par « lien » : donc en gros, tu veux lier des listes déroulantes et en fonction du choix dans une première liste avoir un résultat différent dans la seconde : c'est bien ça ?

Tu devrais prendre l'habitude de faire une recherche dans le forum avant toute question, il y a souvent des réponses ou de bonne pistes tout à fait appropriées. Ici par exemple, tu as carrément un tuto complet sur les listes déroulantes liées.

Merci beaucoup Cyrano, je vais vérifier si ton lien peut m'aider.

La prochaine fois je vais faire une recherche, mais j'avais aucune idée que ca s'appellait une liste déroulante, et en navigant sur le forum j'ai souvent vu que les gens utilisaient les termes anglais. (j'imagine pour que ca soit plus clair, car ce sont les noms en html).

Je vous donnes des nouvelles.

Bonjour Cyrano,

j'ai vérifier ton lien et c'est vraiment du chinois pour moi, je suis un débutant de premiere classe. J'essaie d'insérer ton codage dans dreamweaver et ca sort a moitié.
Le seul moyen que je puisse réussir c'est que quelqu'une me montre la base à partir de mon codage html.
Donc s'il y a une âme charitable, j'accepte l'aide de toute sorte.

Merci à l'avance.

J'essaie d'insérer ton codage dans dreamweaver et ca sort a moitié.

C'est un tuto, le code n'est pas là pour être utilisé te quel, il est là pour illustrer des explications. Il faut lire tout le texte, ne pas négliger la lecture des commentaires et suivre le déroulement des éléments successifs du code.

Si tu ne te plie pas à cet effort de base, tu n'apprendras pas et personne ne pourra rien pour toi. Tu n'espère quand même pas que Dreamweaver va comprendre le code et l'adapter pour toi ? Quant à te faire la base, tu es gonflé, le tuto comporte trois versions différentes. Un dessert avec ça ?

Je comprends très bien ton explication, mais ton tuto sur les listes déroulantes liées ne m'explique aucunement comment lié trois listes sans changer la valeur des autres boites et que le choix de la boite A + B + C donnes un prix X.

Si pour toi ça équivaut de demander un dessert, je vais prendre un Tiramisu.

Prends un peu de recul : on a des listes, la valeur de la liste 2 dépend du choix de a liste 1 et la valeur de la liste 3 dépend du choix dans la liste 2 qu'on ne peut faire qu'à partir du choix dans la liste 1. OK jusque là ?

Bien, maintenant, partons sur un plan global : selon un évènement (choix dans la liste 1), on doit ajuster le choix disponible dans la liste 2 : donc il faut que le choix sélectionné en 1 soit envoyé au serveur pour établir la liste 2 avec les items correspondant : ça, c'est la base fondamentale. Mais on pourrait aussi envisager (parce que tu n'as pas été très précis et clair sur ce point) que nous partons de deux listes, 1 et 2 dont les items sont de toutes manières les mêmes sans que la première affecte l'autre. Ce qui nous intéresse dans tous les cas, c'est le résultat à partir des sélections dans les chacune d'elle, à savoir, si j'ai correctement saisi, un prix.

Donc pose-toi la question suivante : Comment obtiens-tu le prix correct à partir des choix effectués ? Je vais présumer que tu effectues une requête SQL vers la base de donnée où tu vas trouver la réponse.

Maintenant, revenons un instant aux tutos : on te montre un principe de fonctionnement général en l'illustrant avec ce qui se rapproche davantage d'un cas particulier. Le cas particulier, c'est que les choix de la liste 2 dépendront du choix effectués dans la liste 1. Rien n'oblige ça et tu pourrais parfaitement avoir deux listes qui auront toujours le même contenu quel que puisse être le choix effectué dans l'une ou l'autre. Mais, on a toujours un gestionnaire d'évènement (ici onchange() sur les éléments <select>) qui vont déclencher un soit la soumission du formulaire, soit l'exécution d'un code JavaScript préalablement chargé, soit un appel AJAX selon le tuto que tu auras choisi et/ou privilégié quelle qu'en soit la raison. Ce code, quel qu'il soit, va chercher dans une liste, ou une base de donnée, quel prix qui correspond à ce choix.

Donc : les tutos, ça te montre un principe général : à toi de voir comment utiliser ces principes à ton cas particulier.

Et n'oublie jamais un point crucial : la bonne réponse s'obtient en posant la bonne question. Si tu poses la bonne question, ça signifie que tu as correctement identifié le problème général, ce que faisant, tu as déjà résolu les 3/4 du problème

Bonjour Cyrano, je comprends déja mieux le principe ton explication est très clair, merci!

Mais quand j'ouvre ton fichier index dans dreamweaver et que je fais ''preview in a browser, exemple Safari'' il ne reconnait pas tes listes. (et quand je clique sur ton lien ''démonstration ici'' tout fonctionne a merveille.)

Ce qui m'ammène a ma question : est-ce possible de reussir à réunir 2 ou 3 liste combinées sans avoir un fichier de liste indépendant? (dans le fond que le codage de liste et index soit réunit)

merci.

Je te suggère très vivement de remplacer DreamWeaver par Notepad++ et d'apprendre la programmation au lieu de tenter d'utiliser sans comprendre. Accessoirement, au lieu de la fonction preview, ouvre un navigateur et appelle l'url locale pour vérifier... enfin pour autant que ceci ne soit pas du chinois pour toi, parce que je me demande en fin de compte à quel point tu débutes... comprends-tu au moins les bases du fonctionnement d'un système client/serveur ?

Et accessoirement, il serait peut-être utile que tu nous indiques quel environnement de développement tu utilises (version de PHP, version du serveur Apache, version de MySQL)

Salut Cyrano,
désolé pour le délais de ma réponse, mais j'ai enfin comprit le fonctionnement de ta liste déroulante. Merci beaucoup.
J'aime autant ne pas programmé avec slq et seulement avoir mes variante directement dans mes codes html.

J'ai seulement une petite question, est-ce que ça serait vraiment compliqué d'ajouter une troisième bande déroulante pour que je puisse ajouter mon ''imprimé 1 côté ou 2 côtés.
(Si tu cliques sur la quantité 250, tu vas voir dans l'onglet qui suit, la grandeur et ''1 côté ou 2 côtés, mais j'aimerais qu'il soit séparé et une fois avoir cliquer sur un des deux choix, le prix appararaisse en alerte.)

Je suis probablement en train de te demander un deuxième dessert Désolé.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<script language="JavaScript">

function trierMenuProduit(form,list,typeCategorie) // Création de la fonction qui va écrire les différentes options dans le second menu déroulant en fonction du choix effectué.
{ // Dans cette fonction on rabat le nom du formulaire , le nom du menu "select" et la "value" du choix que l'on a effectué.
list.options.length=0;// La remise à 0 des options du menu déroulant est trés importante autrement il "rajoutera" à chaque choix différent de nouvelles options.
// ici on commence les tests d'égalité avec la "value" retournée qui porte le nom de"typeCategorie".
if (typeCategorie == "250")
{
choix=new Option("Grandeur");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".

choix=new Option("4x6 pouces ŽŽ/ 1 côté","62 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.

choix=new Option("4x6 pouces ŽŽ/ 2 côtés","72 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("5x7 pouces ŽŽ/ 1 côté","70 $");
form.produit.options[form.produit.options.length]=choix;

choix=new Option("5x7 pouces ŽŽ/ 2 côtés","87 $");
form.produit.options[form.produit.options.length]=choix;


}

else if (typeCategorie == "500")
{
choix=new Option("Grandeur");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".

choix=new Option("4x6 pouces ŽŽ/ 1 côté","78 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.

choix=new Option("4x6 pouces ŽŽ/ 2 côtés","97 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("5x7 pouces ŽŽ/ 1 côté","97 $");
form.produit.options[form.produit.options.length]=choix;

choix=new Option("5x7 pouces ŽŽ/ 2 côtés","130 $");
form.produit.options[form.produit.options.length]=choix;
}

else if (typeCategorie == "750")
{
choix=new Option("Grandeur");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".

choix=new Option("4x6 pouce","65 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("5x7 pouces","meres");
form.produit.options[form.produit.options.length]=choix;
}

else if (typeCategorie == "1000")
{
choix=new Option("Grandeur");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".

choix=new Option("4x6 pouce","65 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("5x7 pouces","meres");
form.produit.options[form.produit.options.length]=choix;
}

else if (typeCategorie == "2500")
{
choix=new Option("Séléctionnez un produit");
form.produit.options[form.produit.options.length]=choix;

choix=new Option("CD & DVD","cdvierge");
form.produit.options[form.produit.options.length]=choix;

}

else if (typeCategorie == "5000")
{
choix=new Option("Grandeur");// on crée une variable "choix" dans laquelle on va mettre une nouvelle option.
form.produit.options[form.produit.options.length]=choix;// ensuite on atteint le second menu déroulant que l'on va indexer avec notre nouvelle option "choix".

choix=new Option("4x6 pouce","65 $");// Attention lors de la création de notre nouvelle option,
form.produit.options[form.produit.options.length]=choix;// ce que l'on écrit en premier es le texte que va afficher notre menu déroulant,
// le second est la "value" que celui-ci retournera. Et ainsi de suite.
choix=new Option("5x7 pouces","meres");
form.produit.options[form.produit.options.length]=choix;

}
}

</script>
</head>
<body topmargin="0" leftmargin="0">
<form name="catalogue">
<table border="0" cellspacing="0" cellpadding="5" width="950" align="center" >
<tr>
<td align="right" bgcolor="#aacc7f" width="100">
<p>Quantit&eacute;</p>
</td>
<td align="left" bgcolor="#aacc7f" width="150">
<select name="categorie" onChange="trierMenuProduit(this.form,this.form.produit,this.value)"><!-- Appel de notre fonction avec toutes les infos (nom de formulaire, nom du second menu déroulant et la value). -->
<option>Quantit&eacute;</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
<option value="2500">2500</option>
<option value="5000">5000</option>
</select>

</td>
<td align="right" bgcolor="#aacc7f"width="100">
<p>Grandeur</p>
</td>
<td align="left" bgcolor="#aacc7f">
<select name="produit" onChange="alert('Votre prix : '+this.value)"><!-- Ici une simple "alert" qui retourne la value de notre choix. -->
<option>Grandeur</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Salut,
première chose : losrque tu postes du code, utilise la barre d'outil que le forum met à ta disposition, il y a un bouton [HTML] qui permettrait de conserver une mise en forme de code plus lisible.

Bien, ceci dit, après avoir un peu fait le tour, je relève énormément de redondances. Il faut factoriser et simplifier, et du coup, tout deviendra peut-être beaucoup plus clair et tu verras probablement beaucoup plus facilement comment obtenir ce que tu veux faire en séparant la seconde liste en deux listes distinctes, la première pour la dimension, la seconde pour les cotés. Je ne te donnerai pas la réponse tout de suite, mais je te propose un grand nettoyage de ton code, observe bien :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Listes liées pour obtenir un prix</title>
    <style type="text/css">/* <![CDATA[ */
    body {
        margin: 0;
    }
    table {
        border-collapse: collapse;
        margin: auto;
        width: 800px;
        color: #000;
        background-color: #aacc7f;
        border: 3px double #090;
    }
    td {
        padding: 5px;
    }
    td.label {
        text-align: right;
        width: 100px;
    }
    td.champform {
        text-align: left;
        width: 300px;
    }
    /* ]]> */</style>
    <script type="text/javascript">/* <![CDATA[ */
      /**
       * Ajout d'une option dans une liste déroulante.
       * 
       * Attention lors de la création de notre nouvelle option,
       * ce que l'on écrit en premier est le texte que va afficher 
       * notre menu déroulant, ensuite on ajoute la valeur réelle.
       * 
       * @param {Object} optionLabel    Texte qui sera affiché dans l'option
       * @param {Object} optionValue    Valeur de l'option
       * @param {Object} target         Liste cible où sera ajoutée l'option.
       */
      function addOption(optionLabel, optionValue, target)
      {
          choix = new Option(optionLabel, optionValue);
          target[target.length] = choix;
      }
      /**
       * Création de la fonction qui va écrire les différentes options dans
       * le second menu déroulant en fonction du choix effectué.
       * 
       * Dans cette fonction on rabat le nom du formulaire , le nom du
       * menu "select" et la "value" du choix que l'on a effectué.
       *
       * @param {Object} form
       * @param {Object} list
       * @param {String} typeCategorie
       */
      function trierMenuProduit(form, list, typeCategorie)
      {
          /**
           * La remise à 0 des options du menu déroulant est très 
           * importante autrement il "rajoutera" à chaque choix différent
           * de nouvelles options.
           */
          list.options.length = 0;
          var target = form.produit.options;
          // ici on commence les tests d'égalité avec la "value" retournée qui porte le nom de"typeCategorie".
          switch(typeCategorie)
          {
              case "250":
                  addOption("Grandeur", "-1", target);
                  addOption("4x6 pouces / 1 côté",  "62 $", target);
                  addOption("4x6 pouces / 2 côtés", "72 $", target);
                  addOption("5x7 pouces / 1 côté",  "70 $", target);
                  addOption("5x7 pouces / 2 côtés", "87 $", target);
                  break;
              case "500":
                  addOption("Grandeur", "-1", target);
                  addOption("4x6 pouces / 1 côté",  "78 $", target);
                  addOption("4x6 pouces / 2 côtés", "97 $", target);
                  addOption("5x7 pouces / 1 côté",  "97 $", target);
                  addOption("5x7 pouces / 2 côtés", "130 $", target);
                  break;
              case "750":
                  addOption("Grandeur", "-1", target);
                  addOption("4x6 pouce",  "65 $", target);
                  addOption("5x7 pouces", "meres", target);
                  break;
              case "1000":
                  addOption("Grandeur", "-1", target);
                  addOption("4x6 pouce",  "65 $", target);
                  addOption("5x7 pouces", "meres", target);
                  break;
              case "2500":
                  addOption("Séléctionnez un produit", '-1', target);
                  addOption("CD & DVD", "cdvierge", target);
                  break;
              case "5000":
                  addOption("Grandeur", "-1", target);
                  addOption("4x6 pouce",  "65 $", target);
                  addOption("5x7 pouces", "meres", target);
                  break;
              default:
                  // Si on revient sur le choix « Quantité », on remet une option par défaut. 
                  addOption("Grandeur", "-1", target);
          }
      }
      
      /* ]]> */
    </script>
  </head>
  <body>
    <form id="catalogue" method="post" action="listes.html">
      <table summary="">
        <tr>
          <td class="label">
            <p>Quantit&eacute;</p>
          </td>
          <td class="champform">
            <!-- Appel de notre fonction avec toutes les infos (nom de formulaire, nom du second menu déroulant et la value). -->
            <select name="categorie" id="categorie" onchange="trierMenuProduit(this.form,this.form.produit,this.value)">
              <option>Quantit&eacute;</option>
              <option value="250">250</option>
              <option value="500">500</option>
              <option value="750">750</option>
              <option value="1000">1000</option>
              <option value="2500">2500</option>
              <option value="5000">5000</option>
            </select>
          </td>
          <td class="label">
            <p>Grandeur</p>
          </td>
          <td class="champform">
            <select name="produit" id="produit" onchange="if(this.value != '-1'){alert('Votre prix : '+this.value);}">
              <!-- Ici une simple "alert" qui retourne la value de notre choix. -->
              <option value="-1">Grandeur</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Comme tu peux voir, il y a eu pas mal de ménage. Ta fonction trierMenuProduit() a fondu et une nouvelle fonction est apparue : addOption(). Au niveau maintenance, ce sera mille fois plus efficace. J'ai aussi remplacé la collection de if/else if par un switch() : si tu veux rajouter une option, tu auras du coup moins de code à rajouter par rapport à ton système d'origine. Observe aussi dans les valeurs d'attribut onchange de la seconde liste l'ajout d'une condition assortie de l'ajout d'une valeur pour l'option qui affiche « Grandeur »

Attention aussi à la validité de ton code HTML, le XHTML correspond à des normes, il convient de les respecter, d'autant plus avec l'utilisation du DOM en JavaScript, tu auras moins de risques de dysfonctionnements.

J'ajoute enfin qu'il y a assez peu de rapport avec le tuto sur les listes liées. Mais finalement pour le but que tu poursuis, il me semble que la solution que tu as choisie sera plus appropriée.

Maintenant, si tu veux couper la seconde liste en deux, pose-toi la question suivante : comment vas-tu structurer les informations pour que ça fonctionne et que tu puisse mettre « en face » quantité, taille et cotés ? Avec les modifications que j'ai apportées, tu dois voir que tes données sont structurées de façons plus claire, parce qu'il y a bel et bien une structure, et c'est indispensable pour automatiser quoi que ce soit.

Merci beaucoup Cyrano,
tu as fait un nettoyage colossal! Je vais avoir beaucoup moins de difficulté à trouver la solution pour la troisième boîte.
Je te donne des nouvelles une fois que j'ai trouvé.
merci