Laisser une partie de ma page voyante et celle d'en bas modifier (pour plus info

Signaler
Messages postés
10
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
22 février 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour a tous

Alors voila grace a vous j'ai trouver ce script (Voir plus bas) mais je voudrais que selon le choix fait, la page (donc la meme page ou ya ce script)affiche des liens correspondants.

Je m'explique(au cas ou)
Imaginons que je selectionne la Catégorie Office et que je selectionne ensuite Word et bien a partir de ces choix je voudrais que la page se reactualise et affiche(pour ma part) les lien menant vers les tutoriels correspondant a Word

J'espere que vous m'avait compris :)

Merci de m'aidez ...

<html>
<head>
<title>Menu Déroulant</title>

<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 == "Office")
    {
        choix=new Option("Séléctionnez un produit");// 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("Word","Microsoft Word");// 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("Acces","Microsoft Acces");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Excel","Microsoft Excel");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("PowerPoint","PowerPoint");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Outlook","Outlook");
        form.produit.options[form.produit.options.length]=choix;

    }
   
    else if (typeCategorie == "boitiers")
    {
        choix=new Option("Séléctionnez un produit");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Alimentations","alimentations");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Boîtiers","boitiers");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Ventilateurs","ventilateurs");
        form.produit.options[form.produit.options.length]=choix;
    }
   
    else if (typeCategorie == "graveurs")
    {
        choix=new Option("Séléctionnez un produit");
        form.produit.options[form.produit.options.length]=choix;
               
        choix=new Option("Lecteurs CD et DVD","DVD");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Graveurs CD et DVD","CDetDVD");
        form.produit.options[form.produit.options.length]=choix;
    }
   
    else if (typeCategorie == "peripheriques")
    {
        choix=new Option("Séléctionnez un produit");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Réseaux","reseaux");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Ecrans","ecrans");
        form.produit.options[form.produit.options.length]=choix;
               
        choix=new Option("Claviers","claviers");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Souris","Souris");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Casques & Enceintes","casques");
        form.produit.options[form.produit.options.length]=choix;
    }
   
    else if (typeCategorie == "consommables")
    {
        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 == "logiciels")
    {
        choix=new Option("Séléctionnez un produit");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Systémes d'exploitations","os");
        form.produit.options[form.produit.options.length]=choix;
       
        choix=new Option("Bureautique","bureautique");
        form.produit.options[form.produit.options.length]=choix;
       
    }
}

</script>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<form name="catalogue">
    ----

                    Catégorie

       ,
                    <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>Sélectionnez</option>
            <option value="Office">Office</option>
            <option value="boitiers">Boîtiers</option>
            <option value="graveurs">Lecteurs et graveurs</option>
            <option value="peripheriques">Périphériques</option>
            <option value="consommables">Consommables</option>
            <option value="logiciels">Logiciels</option>
            </select>
       ,
                    Produit

       ,
                    <select name="produit" onChange="alert('Variable retournée : '+this.value)"><!-- Ici une simple "alert" qui retourne la value de notre choix. -->
            <option>Sélectionnez une catégorie</option>
            </select>   
       ,
   

</form>

</html>

6 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,
    ici on a tout...
    reste à tout faire...   non ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
je voudrais que la page se reactualise et affiche...
...mettre dans le une balise DIV et écrire dedans en fonction du résultat

exemple

et avec une fonction du type
//----------------------
function Affiche( what_){
  var Obj = document.getElementById('D_INFO');
  if( Obj){
    Obj.innerHTML = what_;
  }
}
il te suffit, dans ton exemple de remplacer
<select name="produit" onChange="alert('Variable retournée : '+this.value)">
par
<select name="produit" onChange="Affiche('Variable retournée : '+this.value)">
...pour test...
;O)
Messages postés
10
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
22 février 2010

Meric de vos réponse mais...

...Je débute et j'avous que je comprend pas trop

dans variable retourné je met quoi le lien de la page correspondante ?

Et aparament vous avait compris mon script alor si vous pouriez me dire comment rajouter une catégories qui dépenderait des deux autres :)

Merci
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Exemple :





//----------------------


function Affiche( what_){
  var Obj  = document.getElementById('D_INFO');
  var Html = what_;
  if( Obj){
    switch(what_) {
     case "Microsoft Word":
       Html = '[ms_word.html ' +what_ +'<\/a>';
       break;
     case "Microsoft Acces":
       Html = ']' +what_ +'<\/a>';
       break;
     default:
       Html ='Mauvaise pioche';
       break;
    }
    Obj.innerHTML = Html;
  }
}


Appel devient...


<select name="produit" onChange="Affiche( this.value)">





;O)
Messages postés
10
Date d'inscription
jeudi 17 janvier 2008
Statut
Membre
Dernière intervention
22 février 2010

j'abandonnne jcomprend rien !!!

Et de plus jvous jure j'eesaye de comprendre je relis bien tous et non jvois pas et  sa a le dont de m'énerver sur place je cherche je cherche et jtrouver pas comment marche ce script

Ya pas quelque chose de plus simple tous fait ou ya qu'a modifier les liens ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
Une autre solution, peut être plus simple à aborder et de
1/ créer tes liens dans des DIVs qui sont cachés...
2/ sur le onchange tu fais apparaître celui qui t'intéresse...

;O)