Liste déroulante dynamique

Fermé
alexandre - 25 juin 2013 à 13:42
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 - 5 juil. 2013 à 22:38
Bonjour,

Je suis sur un projet et j'ai un souci car j'ai une table avec des champs ( Bon Palette,Nom du Fournisseur,Salon,Catalogue,Référence Article) je precise que j'ai pas id car j'extrais un fichier .csv que je mets dans une table.

J'aimerais avoir une première liste déroulante qui affiche les différents champs et lorsqu'on choisis un champs nous aurions une deuxième liste déroulante qui se génère en fonction d'une requête mysql.

Enfin cela me permettrait d'envoyer les paramètres choisis et donc d'afficher ma table dans un tableau avec pour conditions les 2 paramètres des listes.

VOICI MON CODE:

 <!-- saisonnier.php -->

    <!DOCTYPE html>
    <html lang="fr">

    <head>
       
            <title>exemple</title>
            <!-- definir la feuille de style de mon site -->
            <link rel="stylesheet" href="../skin/style1.css"/>
            <!-- definir l'encodage en utf8 -->
            <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
            <!-- mettre la compatibilité a ie8 par defaut -->
            <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
            <script type="text/javascript">
            <!-- fonction java script servant a la partie admin pour afficher ou cacher mes formulaires

             
           
            function getXhr()
    {
        var xhr = null;
        if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest();
        else if(window.ActiveXObject)
        {     // Internet Explorer
            try
            {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        else
        {     // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            xhr = false;
        }
        return xhr;
    }

    /**
    * Méthode qui sera appelée sur le click du bouton
    */
    function trouver_champs()
    {
    var xhr = getXhr();
        //On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function()
        {
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState === 4 && xhr.status === 200)
            {
            leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
            document.getElementById('champs').innerHTML = leselect;
            }
        };

    // Ici on va voir comment faire du post
    xhr.open("POST","recherchesaisonnier.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de l'auteur
    sel = document.getElementById('champs');
    idchamps = sel.options[sel.selectedIndex].value;
    xhr.send("idchamps="+idchamps);
    }
    //******************************************************************************************************
    //******************************************************************************************************

    function trouver_option()
    {
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function()
        {
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState === 4 && xhr.status === 200)
            {
                leselect = xhr.responseText;
                // On se sert de innerHTML pour rajouter les options a la liste
                document.getElementById('option1').innerHTML = leselect;
            }
        };

    // Ici on va voir comment faire du post
    xhr.open("POST","option1.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de l'option1
    sel = document.getElementById('option1');
    idoption1 = sel.options[sel.selectedIndex].value; // PROBLEME ICI
    xhr.send("idoption1="+idoption1);
    }
           

        </script>       
    </head>

    <body>
    <fieldset>


    <label > filtre </label><br/>
    <select name="champs" id="champs" onchange='trouver_champs();' >
    <option value="all">all</option>
    <option value="Bon Palette">Bon Palette</option>
    <option value="Nom du Fournisseur">Nom du Fournisseur</option>
    <option value="Salon">Salon</option>
    <option value="Catalogue">Catalogue</option>
    <option value="Référence Article">Référence Article</option>
    </select><br/>

    <label> option </label><br/>
    <select id='option1' onchange='trouver_option();'>
    <option value='-1'>Choisir un autre filtre</option>
    </select><br/>

    </body>
    </fieldset>
    </html>



----------------------------------------------------------------------------------
recherchesaisonnier.php
----------------------------------------------------------------------------------

 <?php
    require_once('../plugin/MaClassBDD.php'); // ceci est un //objet qui me permet de traiter mes requêtes est cela //marche tres bien
    session_start ();
    $db='csv_db';
    $table='table 1';
    $host='*********';
    $login='*****';
    $mp='*****';
    if (isset($_SESSION['pseudo']) && !empty($_SESSION['pseudo'])
    AND isset($_SESSION['pass']) && !empty ($_SESSION['pass'])
    AND isset($_SESSION['magasin']) && !empty ($_SESSION['magasin'])
    AND isset($_SESSION['acces']) && !empty ($_SESSION['acces']))
    {
    	$pseudo = $_SESSION["pseudo"];
    	$magasin=$_SESSION["magasin"];
    	$acces=$_SESSION["acces"];
    	$champs=$_POST["idchamps"];
    	$_SESSION["idchamps"]=$champs;
    	//echo "$champs";

    	if( $champs!="all")
    	{

    		$select2="$champs";
    		if($acces=="all")
    		{

    		$droit="'Nom Magasin'='$magasin'";
    		}
    		else
    		{
    			if($acces=="admin")
    			{
    			$droit="*";
    			}
    			else
    			{
    			$droit="'Nom Magasin'='$magasin' AND 'GT'='$acces'";
    			}
    		}
    	}
    	else
    	{
    		if($acces=="all")
    		{

    		$droit="'Nom Magasin'='$magasin'";
    		}
    		else
    		{
    			if($acces=="admin")
    			{
    			$droit="*";
    			}
    			else
    			{
    			$droit="'Nom Magasin'='$magasin' AND 'GT'='$acces'";
    			}
    		}
    		$select2="*";
    	}
    }




    <?php
    echo "<select name='livre'>";
    if(isset($_POST["idchamps"]) && ($select2!="*") )
    {
    	$bdd=new C_BDD($db,$table,$host,$login,$mp);
    	$requete="SELECT '$champs' FROM '$table' WHERE $droit";

    	$ressource=$bdd->Effectuer_Requete($requete);
    	while($resultat = mysql_fetch_array($ressource))
    	{
    	$res=$resultat["$champs"];
    	echo "<option value='$res'>$res</option>";
    	//echo "champs= $champs <br/>";
    	}
    }
    else
    {
    	if(isset(($select2=="*") )
    	{
    		$bdd=new C_BDD($db,$table,$host,$login,$mp);
    		$requete="SELECT * FROM '$table' WHERE $droit";

    		$ressource=$bdd->Effectuer_Requete($requete);
    		while($resultat = mysql_fetch_array($ressource))
    		{
    		$res=$resultat["$champs"];
    		echo "<option value='$res'>$res</option>";
    		echo "champs= $champs <br/>";
    		}
    	}
    	else
    	{
    	echo 'pas de parametre envoyer';
    	}
    }
    echo "</select>";
    ?>



Désolé pour les fautes d'orthographe ou pour les erreurs de programmation

Merci de m'avoir lu et de m'aider à régler mon problème.

5 réponses

smiley5555 Messages postés 80 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 11 octobre 2013 22
25 juin 2013 à 20:05
Je pense qu'il faut du javascript pour faire ça, mais je ne peux pas t'aider car je ne code pas javascript
0
Salut !

As-tu essayé de mettre un
alert(idoption1);

après ton // PROBLEME ICI ??



Même si tu postes une connerie, quelqu'un donnera une réponse intéressante et tu apprendras en même temps !
0
Oui j'ai essayer, mais ça ne marche pas
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
4 juil. 2013 à 15:14
Salut !

Regarde du coté de jQuery ;-)
Tu pouras simplifié ton code et y voir un plus clair

A priori ton code js pour la partie ajax a l'air juste, le code php aussi.
Donc je te conseils vraiment jquery : https://jquery.com/
Si tu veux je t'aiderai à transformer ton code !
0
comment faire pour modifier le code stp ??
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
5 juil. 2013 à 10:20
Fais un alert de xhr.responseText pour voir si ton php est bien appelé et renvoie bien qq chose.

Ensuite rajoute quand même un id dans ta bdd, c'est mieux et ca ne change rien à ton import vu que l'id est auto incrémenté il est indépendant du fichier que t'extrais

Comme ca dans le onchange tu envois l'id, tu fais ta requete, tu renvois les options, tu les intègre au select et voilà.

Par contre je comprend pas pourquoi tu as un onchange sur les deux select ?
0
d'accord c'est une erreur les deux Onchanges, après pour le ID ça va pas me changer mon import car j'utilise LORD DATA INFILE
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
5 juil. 2013 à 11:24
Refais voir ton code avec un onchange et une fonction du coup, et avec un alert de responseText aussi
0
va voir ici j'ai le code modifier mais tu ne verra pas l'importation car c une autre fonction php que j'ai faite avant bref de de ID. regarde celui du bas ^^



http://www.siteduzero.com/forum/sujet/liste-deroulante-dynamique-en-php?page=1#message-84473325
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
5 juil. 2013 à 11:50
Le onchange est sur le premier select ;-)

<label > filtre </label><br/>
<select name="champs" id="champs" onchange="trouver_option(this.value);" >
<option value="all">all</option>
<option value="2">Bon Palette</option>
<option value="3">Nom du Fournisseur</option>
<option value="4">Salon</option>
<option value="5">Catalogue</option>
<option value="6">Référence Article</option>
</select><br/>

<label> option </label><br/>
<select id='option1'>
<option value='-1'>Choisir un autre filtre</option>
</select><br/>


function trouver_option(element) {

var xhr = getXhr();

xhr.onreadystatechange = function(xhr) {
if(xhr.readyState === 4 && xhr.status === 200)
{
leselect = xhr.responseText;
document.getElementById('champs').innerHTML = leselect;
}
};

xhr.open("POST","recherchesaisonnier.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
idoption1 = element;
xhr.send("idoption1="+idoption1);
}
0
c'est juste sa???
0